Web Design Wednesday – How to Add a vCard to your Website

Wordpress Wednesdays
A client just requested that I add a vCard to his website, so I thought I’d pass along this information, as this is a quick and easy way to allow your visitors to get all your important contact information with just one click. They can save it to their Outlook contacts, or other email program.

What is a vCard?

A vCard is a virtual business card, or an electronic business card. They’re handy for attaching to your emails, so people know right off the bat how to contact you.

How do you make your vCard?

Most email clients offer this option, but for this post I’ll be talking about Outlook, since that is so commonly used by people.

In Outlook, create a new contact, then add the contact information that you want to be available on your site.
Click the Office Button (or File, depending on your version of Office) > Save As > Export to vCard File, and save it in the directory of your choice. Your file will have an extension of .vcf.
You might also consider using an icon as part of your download link, just to make it look nicer. Here is the one I’m using. You can download this and add your own image to it by clicking here, or there are plenty of various icons available for free on the internet.


What if my email client doesn’t offer this option?

You can manually create a .vcf file and save it in the same fashion.
Open a text editor such as Wordpad or Notepad. Add your information in the following format:
FN:Full name
ORG:Company name
TITLE:Job title
TEL;WORK;VOICE:Business telephone
TEL;HOME;VOICE:Home telephone
TEL;WORK;FAX:Business fax
ADR;WORK:;Company name;Street address;City;State;Zip;Country
ADR;HOME:;;Street address;City;State;Zip;Country
Download a .txt file to use here!
Fill in the desired information and save your file as a .vcf.
However you create your vCard, once it’s complete, you need to upload it and your icon via FTP to your website. If you’re using WordPress, you can upload via the Media uploader.

Add your vCard to your page.

Now, it’s time to add the download link for your page. Here, I’m adding it to my sidebar on my WordPress blog. Since I want people to see it without scrolling, I’ll be adding it to the top of the sidebar, directly below the social media connect icons, in the same text widget. You can add this to any website, in pretty much the same way.

I add the link, the image source and give it some styling and formatting with inline CSS…

…and the finished product looks like this.