Add a vCard .vcf to Website or Blog
As marketing on the internet evolves many companies will be looking to redesign their websites. Businesses will want to update information, add new functionality, upgrade the design and interface, etc…
Currently I am working on a website redesign for Madison Insurance, a Denver based insurance brokerage (more on this later…). While I was researching their current website I noticed this interesting little icon on the contact us page with the words “contact manager information” next to it. Of course I decided to click it. After the link is clicked I am given the option to open a .vcf file. Not knowing what a .vcf file is I open it anyway and lookie there my address book program opens up and saves the contact information for the link I clicked. Wow! That seems like a very useful thing to have on a website, we’re definitely keeping that for the new design.
OK, this will be easy, I will copy the files and add them to the new site…snap, crackle, pop – done. Well that is the way I envisioned it to happen but of course there is more to it than that. I added the files to the new website design then went to test the new addition. When I clicked the link my address book app didn’t open, the contact information was displayed as text in my browser window. What the heck! After research on google I found that you have to tell the apache server how to handle this file type by adding this line to a .htaccess file:
AddType text/x-vcard .vcf
If you are unfamiliar with .htaccess files view this article on .htaccess files
After following the instructions and adding the .htaccess file to the website, I tried it again. Yay! It works this time, at least on my mac. OK so I decide to test it on my windows pc – click the link, a window comes up that asks me to open the file, so far so good, my windows contacts app opens and…no contact information all the fields are blank. What is this, it works on the old site but not the new. Well after banging my head against the wall for a while, it seems that during the process of resaving the files and adding them to the new server they changed from simple text to text files associated with dreamweaver. Even though my mac contacts app seems to be able to handle it the windows contacts app wouldn’t work.
So what I did from here is open the files from the old site, copy the text and paste it into simple text app and resave the files as .txt files with new names. The .txt files were then uploaded to my server and once on the server I renamed them to .vcf files. Now it is time to cross my fingers and test again…that seems to be the answer because it now works on PC, MAC, Safari, Firefox, and ie7.
Helpful source for creating vCards:
If you run into any problems or have any questions on this topic simply leave a reply and I will do my best to help. You can also hire me to do it for you, $25 each vCard tested on PC, MAC, Firfox, Safari and ie7. $100 min.