QR Codes Demystified

If you have a smart phone, hopefully Android, you’ve probably seen a QR code or two. Yep, they’re those crazy, bar code-looking things that you can scan with your phone’s bar code reader, that will link you directly to something, like an app in the Android Market.

Turns out that there are lots of QR code generators out here that’ll help you create a code for quite a few things: Android Market apps, URLs, a block of text, or your contact information. If you take a look at the other posts and pages on this site, you’ll see examples of three of those. It’s great to be able to use someone else’s code to generate things for you, but what if you found out that you can do the same thing with just a little HTML of you own?

So, let’s think about this a bit: if we use this QR code generator site, we can see that we’re really pointing to a Google subdomain, right?


Taking that sample apart, we can see

  • the type (cht) of the image is set to qr
  • the size of the QR image is set to 120×120
  • the link (chl) begins with http, and has the HTML characters for colon and forward slash percent-encoded

The finished product, looks like this:
QR code for eison.net
And the HTML looks like this:
<img src="http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl=http%3A%2F%2Feison.net" alt="QR code for eison.net" />

Note that in order to display the QR code, I had to treat it like any other image file by wrapping my URL in image tags.

Well, what if I wanted to make a link for an app in the Android Market? Turns out it’s very, very similar, though you do need to know a little something about what the Android name for the app really is.

In this example, we’ll make a QR code to search for the Fandango app:

Taking a look at the code, you can see that the only the URL changed and that rather than use the word http, I used the word market, which Android phones understand:
<img src="http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl=URL%3Amarket%3A%2F%2Fsearch?q=fandango" />

See what I did there? I searched the market for the word fandango. Now, if I were an app developer and wanted to be sure that people go directly to my app and not just a list of ones with a similar name, I need to know my app’s full name.

From the code below, you can see that the full app name is actually com.fandango.
<img src="http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl=URL%3Amarket%3A%2F%2Fsearch?q=pname:com.fandango" />

For the sake of full disclosure, I had no idea what the full name for the Fandango app is, but they were nice enough to have their own QR code on their site, which I examined. That, my friends, is the real genius in the uber-searchability of the internet and my best friend Google. When in doubt, ask him. He knows stuff.

Leave a Reply