Create Your Own QR Code

by Tony Lukasavage on Thursday, December 9th, 2010 | comments 10 Comments | Tags: , , ,

The Generator

Text for QR Code:

The Overview

QR codes are basically just bar codes on steroids. They allow you to encode up to 4,296 characters in a format that can be read by most modern bar code scanning devices. More specifically, QR codes make it much simpler to direct smart phone users to your website (or anywhere else you want).

So why do you want to do this? Here’s a few reasons that range in practicality:

  • Direct mobile phones to personally hosted mobile applications (no need for market fees)
  • Direct users from physical storefronts or magazine articles to your website
  • Leave encoded messages for mobile users
  • To be super cool and trendy

The Code

Here’s the Google Chart API URL you hit in order to create your own QR code. Pop it into a browser and it will return your image. There are more optional criteria you can send, which are detailed in the . Be sure to change the sections highlighted in RED to the values that fit your needs.

http://chart.apis.google.com/chart?cht=qr&chs=HEIGHTxWIDTH&chl=YOURTEXT

Now let’s say you wanted to copy my website and have your own generator. It’s pretty simple. Here’s the tiny bit of HTML and javascript I used to make it happen:

<table>
  <tr>
    <td>
      <strong>Text for QR Code:</strong> 
      <form onsubmit="return false;">
        <input type="text" id="qrvalue" value="https://savagelook.com" style="width:250px;"/>
        <button onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;">Encode</button>
      </form>
    </td>
    <td>
      <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com"/>
    </td>
  </tr>
</table>

And here’s another version from Eric Harrison with no tables

<div style="padding:15px 50px;"> 
  <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com" style="float:left;margin-right:25px;" /> 
  <form onsubmit="return false;"> 
    <input type="text" id="qrvalue" value="https://savagelook.com" style="width:60%;font-size:125%;" /><br /> 
    <input type="button" style="padding:5px;font-size:125%;margin-top:10px;" onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;" value="Encode" /> 
  </form> 
  <br style="clear:both;" /> 
</div>

As you can see, its not rocket science, but it sure can add a little techie flare. Have fun and be sure to let me know if you add a QR coding to your geek repetoire!

10 Responses to “Create Your Own QR Code”

  1. Eric Ryan Harrison says:
    December 9, 2010 at 2:46 pm

    Cool post. I’ve know about the QR code generator in the Charts API for a long time and even use a bookmarklet someone wrote that generates them based on the URL of the page my browser is on.

    But I think it’s a good idea to have the ability to quickly generate a QR code from anywhere without having to remember the arcane API parameters of Google Charts API. As a sort of FYI among peers, I took your simple little generator and added it to my website/blog for my own benefit. I ended up changing all of your syntax and stripping out the table, but I still gave you credit on the page.

    Mine is at http://ericharrison.info/qr/

    Thanks for sharing the useful little idea.

  2. Tony Lukasavage says:
    December 9, 2010 at 3:43 pm

    Nice, glad to see you liked it. Feel free to chop it up as you please. Its a small bit of code for the exact purpose you mention: not having to remember the Google API syntax.

    And in turn I listed your version here on my site as well ;)

  3. Eric Ryan Harrison says:
    December 9, 2010 at 4:46 pm

    Neat! Thanks for the mention. Honestly, I’ve got nothing against tables, I just don’t like using them for anything other than tabular data. It’s pretty much the only thing I’m a stickler about these days.

    Of course, as you can see, I then went off and added all sorts of inline styles, which is another “standards” faux pas, but meh, I’m lazy… :D

  4. Tony Lukasavage says:
    December 9, 2010 at 5:16 pm

    HTML “standards” are hard to take seriously when so much web development time is spent on cross browser compatibility. The long and short of it is that web site visitors dont care about the underlying code, just that it looks good when they get there!

  5. jqueryking says:
    December 20, 2010 at 8:31 am

    Excellent stuff there mate!! found a lot of insights on this one! Thanks :)

  6. Tony Lukasavage says:
    December 20, 2010 at 8:37 am

    Thanks jqueryking! Same to you, I really like those JS notifications you posted recently. You’ll probably see them on a savagelook.com project in the near future.

  7. Q says:
    December 20, 2010 at 3:18 pm

    Don’t know if this would interest any one but I created a script that
    processes QR codes via email/mms message. I originally wanted to use QR
    Codes for a few of my clients but didn’t want to leave those with out
    smart Phones high and dry so I created a script to compensate. I have
    thought about setting it up for free use but that could get pricey over
    time with little to gain. I have been looking for companies to partner
    with the help monetize it. Any thoughts on monetization?

  8. Jeylan says:
    December 30, 2010 at 6:00 am

    I am also thinking using QR code for my Restaurant listing but better worl with loyality reward thing any one help on this matter.
    please contact me at jeylankgooglemailatcom.
    appreciate any support

  9. Création et intégration d'un générateur de codes QR sur son blog | Ballajack says:
    January 21, 2011 at 7:08 am

    [...] Source – Intégration QR code sur un blog [...]

  10. Albert Municino says:
    February 13, 2011 at 4:41 pm

    I gave you some play in my QR post on posterous. Thanks for the generator~! AM