Forcing vCard downloads on the web

A vCard is like an electronic business card. VCards are often attached to emails, or placed on the contact page of a website (see my contact page, for example). VCards can be easily imported into Outlook, and clicking a vCard link in OSX will automatically add the contact details to your Apple Address Book.

Putting a vCard on your website ought to be very straightforward: just place the file, with its .vcf extension, onto your web server and put a link to it on your contact page. But, like me, you may run into a problem here. When you click on the link in the web page, you may find that the browser opens the vCard file into the browser window, instead of starting a download

There are 2 different ways to solve this problem. The first one is to modify your web server so that it serves up the correct MIME type for the vCard file in the HTTP header. In Apache, for example, you could set this up in the main MIME type configuration file (if you have access to it) or you can set it in a local .htaccess file by adding the following line:

AddType text/x-vcard .vcf

See this article for more details.

The second way to approach the problem is to setup the HTTP headers dynamically. HTTP headers cannot be set on an HTML page of course: an HTML page will have its own headers. To manipulate the headers explicitly you will need to use a server-side scripting language such as PHP or ASP. A decent PHP script for doing this can be found at elouai.com/force-download.php. Note that it is a good idea to hardcode your vCard filename into the script itself to prevent hackers from hijacking the script.

Tags: ,

Posted on Friday, June 15th, 2007 at 7:23 pm and filed under Code. You can follow any responses to this post through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

30 Comments

  1. Thanks! This was helpful

    Dorie at 7:29 pm on 22 Aug 07

  2. ditto on what dorie said. saved me a good amount of frustration!

    Tony at 7:30 pm on 1 Dec 07

  3. Thanks…saved me about 3 hours of time…

    Fej at 7:31 pm on 2 Jan 08

  4. any idea how to make this work to download a vCard with mobile Safari on the iPhone?

    even with the force-download script the vCard comes up as text on the iPhone.

    steve at 9:16 pm on 20 Aug 08

  5. Tha-haa-haaaaank Yoo-hoo-hoooou!!!

    I spent 90 minutes trying to figure out what was wrong with my server. After I kludged together a PHP script to solve the problem, I finally found this page. The answer to this relatively common problem is remarkably hard to find. Your explanation was clear and concise. I only wish that I had found it first.

    @Steve as far as I know, as of iPhone 2.1, Safari on iPhone still doesn’t support downloading vCards. That’s what sent me on this hunt.

    Steve Cotterill at 6:34 pm on 30 Sep 08

  6. Thanks! This fixed my problem.

    Rick Winkler at 7:51 pm on 21 Dec 08

  7. Thanks, this was helpful

    Irfan at 7:53 pm on 4 Feb 09

  8. This looks like what I need. Thank you. :)
    I’d like to copy and paste the PHP example but I don’t understand what I have to edit in the script to launch my “Vcard.vcf”
    Any info would be greatly appreciated.
    Thank you.
    -Alex

    Alex at 2:26 pm on 10 Jun 09

  9. Hi Alex, well if you were using the eLouai script, for example, you would replace the line $filename = $_GET['file']; with $filename = ‘Vcard.vcf’;

    (Leaving it to pull out files from the URL is very insecure anyway as this would let people download any random file from your server).

    Ben Hayes at 2:43 pm on 10 Jun 09

  10. Hello,

    You have described perfectly the dilemma I’ve been dealing with. I’m trying to post the vcard (for download) with out it leading to html text.

    Your solutions were beyond me. I do not have server or networking experience. I use Dreamweaver MX on a Mac. Here is an example of the html concerning the vcard:
    —————–
       
         <a href=”robwellens.vcf”>vCard</a>
         
    ——————-
    is there some text command I can place somewhere in this to make the card download.

    Thanks for your help.

    Rob Wellens at 7:23 pm on 21 Jul 09

  11. Hi Rob,

    Unfortunately not, for the reasons I explained in the article: you can’t explicitly set your HTTP headers on a normal HTML page. You could try contacting your hosting provider and ask them to change the MIME type association for .vcf files.

    admin at 8:10 pm on 21 Jul 09

  12. This article was very helpful – thank you.
    I love your website – the comments ‘balloons’ are fantastic.
    Well I’m off to check out some of your other (interesting looking) content.
    Thanks again.
    Tom

    Tom Bannister at 1:03 am on 28 Jan 10

  14. THANK YOU !

    Rosie at 5:53 pm on 30 Apr 10

  15. so, in fact it’s all about a server-side issue. it’s good to have someone else to blame other than myself ;) now all I need to do is upload my folder and see if it works then.

    thanks for the info, mate.

    cheers.

    Aydin Yavs at 9:04 am on 14 May 10

  16. Neat trick which just saved me a lot of head scratching. Thanks

    Gareth Evans at 10:25 am on 29 Sep 10

  17. The AddType worked like a champ. (Note to others — you may have to clear your browser cache before it tests properly.)

    Thanks.

    Stephen R at 4:59 pm on 22 Oct 10

  18. Hi
    I am having the exact same problems on my site – try it out yourself..
    I have thried to append:
    AddType text/x-vcard .vcf to my .htaccess file – but it does’nt work
    on my smartphone… (My smartphone displays the vcf file as text)

    (it DOES work on my PC though)
    What is wrong ??? Can anybody help me :)
    Regards, Claus

    Claus at 11:40 am on 20 Jan 11

  19. Hi Claus

    I haven’t experimented with this on mobile devices yet. Interesting that it works for you on a desktop browser but not on your phone.

    What make/model of smartphone do you have? My hunch is that some smartphone OS simply won’t give you this feature. Have you successfully done a .vcf on your smartphone from a different website?

    Ben

    admin at 9:49 am on 21 Jan 11

  20. Hi again
    I have a Samsung Galaxy 5 – and my colleage has a HTC.
    No one of them can display the vcf file correctly.
    But your sites vcard (http://www.jackfruitdesign.com/contact/)
    is displayed correctly !!!!
    I can see that you somehow has made the programming a little different than me – but I cant see the exact difference.
    I just make a link to the vcf file – and that functions on my browser, but not on my phone.
    It seems that you make a link to a folder called “downloadvcard”
    AND also something about a stylesheet.

    See here:

    —–
      Jackfruit Design Ltd   4th Floor, Bush House72 Prince Street  Bristol  BS1 4QD  United Kingdom   Tel: 07900 968792 Fax: 020 8082 5298 Email: info@jackfruitdesign.com Skype: jackfruitdesign   Download our v.card
    —–

    Whats in the stylesheet ?

    Im a newbie so its quite new to me, whats going on with the stylesheet..

    Regards, Claus

    Claus at 11:02 am on 21 Jan 11

  21. Hi Claus

    The stylesheet would have no effect on this at all. I am using the second method discussed in my blog post: i.e. a PHP script that sends out the headers you want. Maybe you could try that. 

    admin at 11:46 am on 21 Jan 11

  22. I tried to do it but when I click on the link it says: ERROR: download file NOT SPECIFIED. USE force-download.php?file=filepath

    could you tell me what I did wrong?!?! (newbie with php lol)

    Veronie at 11:13 pm on 3 Mar 11

  23. I was able to make changes with .htaccess file. It works great on every phone except for the iPhone. It still comes in as text. Is there another format of vcf that iphone will pull in?

    Joe at 1:53 am on 15 May 11

  24. Hi Joe

    I’m afraid there’s no way to get the iPhone to directly download a vCard from a web page. Apple in their wisdom have blocked this.

    There are a couple of workarounds like using email (http://thecodetrain.co.uk/2009/11/adding-a-vcard-to-your-iphone-address-book-from-a-web-page/) or re-directing to Google maps (http://www.voiscout.de/vcard.html).

    Hope this helps

    Ben Hayes at 12:52 pm on 16 May 11

  25. Problem:
    1) open .vcf file in google chrome, .vcf displays as text
    2) add “AddType text/x-vcard .vcf” into .htaccess file
    3) re-open .vcf file in google chrome, .vcf still displays as text

    Solution:
    If you notice the same problem, you will have to clear browser cache, restart the browser, try again and work!

    David Ip at 10:19 pm on 6 Aug 11

  26. Thanks very much – just adding the line AddType text/x-vcard .vcf to my htaccess was enough.

    Saved me much time and hassle – great stuff.

    Cheers,

    Konrad

    Konrad at 3:00 pm on 7 Sep 11

  27. Server Hilfe…

    [...]Forcing vCard downloads on the web | The Sheep[...]…

    Server Blog at 8:57 pm on 5 Oct 11

  28. the first choice worked well on the desktop and on the blackberry. thank you very much.

    Xx at 5:57 pm on 31 Oct 11

  29. Thank you times infinity. Just saved my sunday afternoon.

    Andrea at 6:47 am on 13 Nov 11

  30. Thanks dude! It really work for me! :) I edit the mime.conf from apache and inserted the line “text/x-vcard .vcf” at the end.

    Thanks again

    DefToneR at 1:53 am on 4 Feb 12

Leave a comment