How do publish a vCard using a QR Code

We now have our contact details in a vCard format, ready to be downloaded to your smartphone, mac or PC. Getting it online has been a tricky process. Well for me it was. Here is how I did it.

A QR Code linking to our vCard contact details

It all started a month or so ago. I wanted to add a QR code (the square barcode type things you see every where now) to a flyer I was working on. The idea was the client could scan the code using google goggles (or similar app) and be taken to either my website or download a vCard file containing all the contact details for the company.

This is what I found out.

First of all you need a vCard file. These are easy to produce using any number of websites out there. If you have a smartphone you can create the contact on your phone and send the contact to yourself as an email attachment.

A vCard contains readable text so can be easily opened, copied and edited in a text editor. First I tried to get the contact details directly into a QR code. I copied the text contents of the vCard and used invx.com to encode the text into a QR code, which you can see here.

There are different versions of the vCard format. Mine is in version 2.1 which is supported by most phones and the later versions do have some compatibility issues.

It worked to some degree but google goggles was not playing ball. Goggles would automatically recognise the image but it would see it as text. If you could beat the automatic recognition it would been seen as a vCard file and worked quite nicely. I had no problems on my friend iPhone. I was not happy with this solution not working 100% of the time so I tried uploading the vCard directly to my website.

I created a folder on my website called vCard and placed the vCard.vcf file within. This means you can access the file by linking to http://rawtreecare.co.uk/vCard/vCard.vcf. The problem, as you will see by clicking the link, is most browsers would load the file within the browser. So I needed to find a way to to force the browser to download the file.

Php (a web language used to display dynamic web pages such as our site) can be used to force an internet browser to download a file. I found a great little tutorial on how this works at about.com.

So here is what i did.

  1. I copied the code from the about.com tutorial into a text editor. I changed the file names on lines 2 and 4 to ‘vCard.vcf’
  2. After a few tries i got the correct MIME type ‘text/x-vcard’ so the whole php file reads

<!–?php
header(‘Content-disposition: attachment; filename=vCard.vcf’);
header(‘Content-type: text/x-vcard’);
readfile(‘vCard.vcf’);
?>

Its important that you do not add any blank lines as this will cause problems

  1. Save the  file as index.php (make sure there is not a .txt extension) and upload it, along with the vCard.vcf file to  the vCard folder on my web server
  2. Use invx.com to generate a QR code using the url http://rawtreecare.co.uk/vCard/

So by going to http://rawtreecare.co.uk/vCard/ or scanning the QR code, index.php is automatically opened by the browser which then starts the download of the vCard.

There are easier ways to do this without using php. For example you could upload you vCard to a file sharing website such as www.dropbox.com (using the public folder) and create a QR code using the public url to the file. This is an easy way to share your vCard but I wanted to have my vCard on website. This also means you can update the vCard file when your details change without changing the QR code.

Hope this helps anyone in a similar situation. Any comments or suggestions are welcome below

Further ideas

  • How to customise your QR codes
  • 2d-code.co.uk – List of QR code and barcode generators
  1. Guillermo left a comment on October 6, 2012 at 8:47 pm

    You helped me to create the code and I got better.
    You dont need one file, and can protect your phone and mail from hackers:
    This code in PHP run perfect in android and PC:

    if ($_GET[“password”]==”vcard”) {
    header(‘Content-type: text/x-vcard’);
    header(‘Content-disposition: attachment; filename=name surname.vcf’);

    $contenido = ‘BEGIN:VCARD’.chr(10).
    ‘VERSION:2.1′.chr(10).
    ‘N:lastname;name;;;’.chr(10).
    ‘FN:complete name’.chr(10).
    ‘TEL;CELL:+54-123456′.chr(10).
    ‘EMAIL;HOME:mail’.chr(10).
    ‘URL:www.web’.chr(10).
    ‘END:VCARD’; // Contenido del archivo
    print($contenido);
    }

    ————-
    The if no is necesary, you can use it for protect the file:
    http://www.rawtreecare.co.uk/vcard.php?password=vcard

    if password=vcard …. code …. end if

  2. John TC left a comment on March 16, 2013 at 9:46 am

    It’s not working …
    “Cannot load QR code”

    • richard left a comment on March 21, 2013 at 5:38 pm

      Should be fixed now, thank you for letting me know

  3. makis left a comment on April 17, 2013 at 8:05 pm

    Hello there,
    I made a qrcode from a link to my public folder at dropbox where I uploaded a vcard.
    Qrreader scans the qrcode and says Cannot load QR code…

    • richard left a comment on July 3, 2013 at 6:10 am

      I would think that there is something wrong with the QR code. Could be down to the size maybe? Try generating a new QR code, maybe to a different URL and see how you get on.

Leave a Comment

Your email address will not be published. Required fields are marked *