QR codes for easy smartphone contacts

⏲️ Time: 3 mins

Edit: It looks like mobile safari doesn’t like vcf files and will throw an error when trying to work with them. From what I can tell with some research, the app QRafter, with advanced functionality, can properly handle the downloaded file. You can read more here Download vcard on iPhone with Qrafter

Apple, get your shit together with this topic


With the recent job changes from this spring, documented here (https://michaelbox.net/2011/03/i-make-things-for-the-internet/), I found need for a refreshed resume/portfolio site. I decided that I wanted to create an experience with the information presented, and break away from traditional methods used to show resumes or portfolios. I hope it ends up remaining my go-to spot to find out everything a company or person needs to see if I’d make a good fit on their team or someone worth collaborating with.

The proliferation of smartphones, holding capabilities unforeseen by previous generations, provided a chance for me to make my new resume website very mobile and smartphone friendly. I am proud to say that it renders very decently on a small screen. QR Codes are also very in vogue, and can hold many different forms of data. This fact got me thinking about the information on my resume site and how I could further share it.

My contact information is the perfect chance to merge these technologies. I know that address books utilize vcards. This is usually done through opening a file with a .vcf file extension. VCF generation is simple and with the help of online generators, anyone can create one for themselves. For the one that I have linked from the resume site, I used vcardmaker.com. For this case, I just entered all of the same contact information that I had at the top of the site. After I downloaded the generated file, I uploaded to my server space and copied the resulting url to the file for use with a QR code.

I originally wanted to use JQuery-QRcode as it creates the code with zero image use and would be extremely easy to update as time went on. However, there were a couple issues with it that resulted in no output of the QR code, so for now, alternatives will be used. I will definitely keep my eye on this jquery plugin and see about returning to it in the future.

I decided to go with Zxing Appspot for creating a QR code image linked to my .vcf file. Simply choose “URL” for the contents, paste in the .vcf url and hit generate. All that’s left is saving the resulting QR code image to be put into the site.

All that is left for this is adding it to the site and providing some styling. I decided that I didn’t want it showing all the time, so with a bit of jquery, I set up a link for users to click in order to toggle it on screen and then off again once done.

Now, all that a person needs to do is use their smartphone’s bar code scanner app to scan the QR code and download the .vcf file. Once done, they simply need to click on the file and your phone should offer to open with your address book. All of the contact information in the .vcf file should then be imported into a new address book entry.

I feel that this is a novel use for QR codes and makes adding someone to an address book a matter of a few clicks and a minute of time, instead of requiring someone enter all of the contact info manually. Hopefully others will see this as a good idea and implement it for their own online resumes.


Michael is a seasoned developer who loves helping build stuff for the internet. He brings over a decade of varied experiences working with both front and back end developer stacks.

His primary focus has been WordPress and PHP and all the components that go along with them. During the day, he is a Support Engineer with WebDevStudios, helping clients get the best that they can out of their own websites.

Categories: Creativity, Web DevelopmentTags: , , ,

Leave a Reply

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