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

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: BEGIN:VCARD VERSION:2.1 N:name;Full FN:Full name ORG:Company name TITLE:Job title TEL;WORK;VOICE:Business telephone TEL;HOME;VOICE:Home telephone TEL;CELL;VOICE:Mobile TEL;WORK;FAX:Business fax ADR;WORK:;Company name;Street address;City;State;Zip;Country ADR;HOME:;;Street address;City;State;Zip;Country URL;HOME:http://www.personaldomain.com URL;WORK:http://www.workdomain.com EMAIL;INTERNET:you@firstdomain.com EMAIL;INTERNET:you@seconddomain.com END:VCARD 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.