vCards as QR Codes with Google Chart API

Here is an example of a vCard turned into a UTF-8 encoded URL string. Once we encode it in this fashion, we can put it in a URL formatted for the Google Chart API that will generate a QR Code of the vCard data.

Original vCard


BEGIN:VCARD
VERSION:3.0
N:Gump;Forrest
FN:Forrest Gump
ORG:Bubba Gump Shrimp Co.
TITLE:Shrimp Man
TEL;TYPE=WORK,VOICE:(111) 555-1212
TEL;TYPE=HOME,VOICE:(404) 555-1212
ADR;TYPE=WORK:;;100 Waters Edge;Baytown;LA;30314;United States of America
LABEL;TYPE=WORK:100 Waters Edge\nBaytown, LA 30314\nUnited States of America
ADR;TYPE=HOME:;;42 Plantation St.;Baytown;LA;30314;United States of America
LABEL;TYPE=HOME:42 Plantation St.\nBaytown, LA 30314\nUnited States of America
EMAIL;TYPE=PREF,INTERNET:forrestgump@example.com
REV:20080424T195243Z
END:VCARD

vCard Encoded for a URL


BEGIN%3AVCARD%0AVERSION%3A3.0%0AN%3AGump%3BForrest%0AFN%3AForrest%20Gump%0AORG%3ABubba%20Gump%20Shrimp%20Co.%0ATITLE%3AShrimp%20Man%0ATEL%3BTYPE%3DWORK%2CVOICE%3A%28111%29%20555-1212%0ATEL%3BTYPE%3DHOME%2CVOICE%3A%28404%29%20555-1212%0AADR%3BTYPE%3DWORK%3A%3B%3B100%20Waters%20Edge%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0ALABEL%3BTYPE%3DWORK%3A100%20Waters%20Edge%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0AADR%3BTYPE%3DHOME%3A%3B%3B42%20Plantation%20St.%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0ALABEL%3BTYPE%3DHOME%3A42%20Plantation%20St.%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0AEMAIL%3BTYPE%3DPREF%2CINTERNET%3Aforrestgump%40example.com%0AREV%3A20080424T195243Z%0AEND%3AVCARD

Encoded, but perhaps easier to read


BEGIN%3AVCARD%0A
VERSION%3A3.0%0A
N%3AGump%3BForrest%0A
FN%3AForrest%20Gump%0A
ORG%3ABubba%20Gump%20Shrimp%20Co.%0A
TITLE%3AShrimp%20Man%0A
TEL%3BTYPE%3DWORK%2CVOICE%3A%28111%29%20555-1212%0A
TEL%3BTYPE%3DHOME%2CVOICE%3A%28404%29%20555-1212%0A
ADR%3BTYPE%3DWORK%3A%3B%3B100%20Waters%20Edge%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0A
LABEL%3BTYPE%3DWORK%3A100%20Waters%20Edge%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0A
ADR%3BTYPE%3DHOME%3A%3B%3B42%20Plantation%20St.%3BBaytown%3BLA%3B30314%3BUnited%20States%20of%20America%0A
LABEL%3BTYPE%3DHOME%3A42%20Plantation%20St.%5CnBaytown%2C%20LA%2030314%5CnUnited%20States%20of%20America%0A
EMAIL%3BTYPE%3DPREF%2CINTERNET%3Aforrestgump%40example.com%0A
REV%3A20080424T195243Z%0A
END%3AVCARD

Submit to Google

This can now be submitted to Google’s Chart API as a URL:



http://chart.apis.google.com/chart?cht=qr&chs=400x400&chl=BEGIN:VCARD%0AVERSION:3.0%0AN:Gump;Forrest%0AFN:Forrest%20Gump%0AORG:Bubba%20Gump%20Shrimp%20Co.%0ATITLE:Shrimp%20Man%0ATEL;TYPE%3DWORK,VOICE:(111)%20555-1212%0ATEL;TYPE%3DHOME,VOICE:(404)%20555-1212%0AADR;TYPE%3DWORK:;;100%20Waters%20Edge;Baytown;LA;30314;United%20States%20of%20America%0ALABEL;TYPE%3DWORK:100%20Waters%20Edge\nBaytown,%20LA%2030314\nUnited%20States%20of%20America%0AADR;TYPE%3DHOME:;;42%20Plantation%20St.;Baytown;LA;30314;United%20States%20of%20America%0ALABEL;TYPE%3DHOME:42%20Plantation%20St.\nBaytown,%20LA%2030314\nUnited%20States%20of%20America%0AEMAIL;TYPE%3DPREF,INTERNET:forrestgump%40example.com%0AREV:20080424T195243Z%0AEND:VCARD&chld=L

The Result

The image below is coming from the Google Chart API, not an image file on my server.
Example QR Code

Resources

This entry was posted in Google APIs, Information Flow, PHP, QR Codes. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>