With smartphones now mainstream the popularity of QR Codes (or Quick Response codes) has taken off rapidly! It seems that QR Codes are appearing everywhere and it makes sense that you want to generate your own.
There are plenty of ways to generate QR Codes online but I’m going to focus on just one. The Google Charts QR Code API. For those not familiar with Google Charts it’s a free service provided by Google to generate a WIDE variety of charts (ie. line charts, bar graphs, pie charts, and a whole lot more). One of the more obscure options is the QR Code.
Using the Google Charts API will also allow you to create dynamic QR Codes and use them as images in your HTML or anywhere else that accepts URLs as an image source. For instance, the QR Code below is generated with the following URL and when scanned displays the message “I Love QR Codes!!! HI MOM!”
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=I+Love+QR+Codes!++HI+MOM!&choe=UTF-8
The above QR Code is not an image stored on my server. In fact, it is not “stored” anywhere. Any time this site is refreshed it is generated and sent to the directly browser.
For some of you, the above example gives you all you need in order to get started. For the rest let me break it down for you. I’ll explain each part of the URL above. To play around with the QR Code above open a new browser window and paste the URL above into the new window. Hit Enter and you should see the same QR Code as above. From here, you should be able to modify the URL and get your own QR code by modifying the URL.
| https:// | (required) This part tells the client that we are using an encrypted HTTP session. The data transmitted through this request will be protected as it travels over the Internet. If you don't want to encrypt it just remove the s from https. |
| chart.googleapis.com/chart | (required) This is the location of the Google Chart API. Do not change this or it wont work. |
| ? | (required) The question mark tells the web server that the next part of the URL is data that is required to fulfill the URL request. |
| chs=150x150 | (required) Now we're customizing our QR Code. This portion sets the size in pixels of our chart. It is in the format of WIDTH x HEIGHT. |
| & | (required) This tells the server that there is another variable following. All of the &'s in the URL do the same so I will not explain each of them. Just know that you need these after each variable. |
| cht=qr | (required) This tells the Google Chart API to generate a QR code, as opposed to others it is capable of generating. |
| chl=I+Love+QR+Codes!++HI+MOM! | (required) This is the contents of your QR Code. This is where you can enter your custom message. Use the plus sign (+) for spaces. If you want to encode a web address put it here and some phones will automatically open the site when scanned. |
| choe=UTF-8 | (optional) You're probably better off leaving this one as is. It is in charge of setting the output encoding.. That's a whole other post to explain. Leaving it as UTF-8 is a fine choice! :) |
For the more advanced users there are more options described on the QR Code API page such as error correction. It’s some pretty cool stuff. I was messing around with the error correction level, basically I set error correction to the highest and even with part of the QR Code covered up I was still able to get a successful scan!
And that is Google Charts QR Code generator in a nutshell!
