How do publish a vCard using a QR Code

March 11, 2012 5 By Richard

Sponsored Ad

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.


Sponsored Ad

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.


Sponsored Ad

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


Sponsored Ad

Further ideas

  • How to customise your QR codes
  • 2d-code.co.uk – List of QR code and barcode generators

Sponsored Ad