Automatically insert a QRcode bookmark link on your WordPress articles

Let’s say you want to put a QRcode (a form of 2D barcode) on your WordPress articles. Why? Because you can.

Here is how you can do just that utilizing Google’s Charts API:

   1: <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">

   2:     <img src="http://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=<?php the_permalink(); ?>" alt="<?php the_title(); ?>" style="float:right;border:0;height:250px;width:250px;" />

   3: </a>

Let’s break that down, shall we?

First off, we started out with an anchor tag. While that’s entirely optional, it gave us an opportunity to tag the QRcode as a bookmark (complete with url, rel, and title values), which is what it is.

Next, we insert an image element with the src value pointing to Google’s Charts API, and we pass is various parameters.

Here’s how we did that:

• The base url for Google Charts is http://chart.apis.google.com/chart
• Next, we specify that we want the result to be a QRcode by passing it ?cht=qr
• Next, we need to tell the API what size we want in pixels, in our case 250px square, by passing it &chs=250×250
• Next, we pass the permalink url as the value to encode into the barcode by passing it &chl=<?php the_permalink() ?> (of course you can pass a static URL, geocode, plain text, etc. to the API if you’d rather do that)

That’s all we need to do. Of course, you can specify the encoding, the data-redundancy/error-correction, margin values, and other stuff, but that’s all we have to have.

We then supply the alt value (in this case <?php the_title() ?>) and some inline css to turn the border off and set the size and float. Then we close the anchor element.

Tada! Instant QRcode!

Of course, you can do this with other CMS’s, or even manually.

Try these out:

What have you found using QRcodes?