Generate QR Codes on Your Website or WordPress Post with Google Chart Tools

• Tweet

QR Codes, or Quick Response Codes, were initially designed by the automotive industry to tag parts. The black and white square pattern is a two dimension bar code that essentially translates to text. If you own a smart phone or tablet, you’re probably used to seeing and scanning them (with a barcode scanning application) as a means of either extracting information or a website URL.

By carrying information in both directions (vertically and horizontally), QR code can carry up to several hundred times the amount of data carried by an ordinary bar codes. Different versions of QR codes are required based upon the amount of information that it is required to carry.

Denso Wave own the Patent for QR Codes but have not exercised their claim. QR codes are essentially open source.

Used in popular culture, we’re seeing more and more QR codes on websites, promotional posters, magazines and business cards. They’re everywhere! I’ve seen quite a few people use them as an alternative to an ‘avatar’ while other people I know use them in email signatures.

The following PHP code (and WordPress shortcode) will generate QR Codes using the Google Tools API.

PHP QR Code Function

Used outside of WordPress, you can use the following PHP function to generate a QR Code.

<?php
function GoogleQR($url,$widthHeight ='150',$EC_level='L',$margin='0') {
  $url = urlencode($url); 
  echo '<img src="http://chart.apis.google.com/chart?chs='.$widthHeight.'x'.$widthHeight.'&cht=qr&chld='.$error.'|'.$margin.'&chl='.$url.'" alt="'.$alt.'" widthHeight="'.$widthHeight.'" widthHeight="'.$widthHeight.'"/>';
}
?>

Usage:

$QRurl = "http://www.internoetics.com";
GoogleQR($QRurl);

WordPress QR Code Shortcode

Used within WordPress, we can generate a QR code quickly and easily with simple shortcode. For example, if I wanted to generate QR code for this website, I can use the shortcode of [qrcode url=”http://www.internoetics.com/”]. This will generate the code that you see on the right hand side. If you have a mobile scanner, it will link back to this website.

The following will allow you to generate QR codes for any website (or text) of your choosing. Copy the following into your theme’s functions.php file or add it into your shortcode plugin.

function google_qr_code($atts) {
  extract(shortcode_atts(array(
    'url' => 'http://www.internoetics.com/',
    'widthHeight' => '90',
    'error' => 'L',
    'margin' => '0',
    'alt' => 'QR Code',
    'align' => 'right',
    'hvspace' => '5'
  ), $atts));

  $url = urlencode($url); 
  return '<img src="http://chart.apis.google.com/chart?chs='.$widthHeight.'x'.$widthHeight.'&cht=qr&chld='.$error.'|'.$margin.'&chl='.$url.'" align="'.$align.'" hspace="'.$hvspace.'" vspace="'.$hvspace.'" alt="'.$alt.'" widthHeight="'.$widthHeight.'" widthHeight="'.$widthHeight.'"/>';
}
add_shortcode('qrcode', 'google_qr_code');

Available Shortcode Parameters

Shortcode parameters are as follows. Default output is defined in the actual shortcode.

url – URL (or text) you want to display.
widthHeight – Height and width of your QR Code image.
error – Error correction to enable recovery of missing, misread, or obscured data (L, M, Q or H)
margin – Width of the white border around the data portion of the code
alt – Image ‘alt’ text.
align – Text alignment.
hvspace – Horizontal and Vertical image spacing

The appropriate QR code version will be returned from Google depending on the number of characters you provide in your URL string. You can read more about versions and Google Chart Tools on their website.

Other Uses

There are hundreds of applications for QR Codes. For example, if you wanted to include the QR Code attached to each and every post into your sidebar, you could use the following:

function post_qr_code($atts) {
  extract(shortcode_atts(array(
    'widthHeight' => '120',
    'error' => 'L',
    'margin' => '0',
    'alt' => 'QR Code',
    'align' => 'center',
    'hvspace' => '0'
  ), $atts));

  $post_permalink = post_permalink();
  $url = urlencode($post_permalink); 

  $return .= '<center><strong>Post QR Permalink</strong></center><br>';
  $return .= '<center><img src="http://chart.apis.google.com/chart?chs='.$widthHeight.'x'.$widthHeight.'&cht=qr&chld='.$error.'|'.$margin.'&chl='.$url.'" align="'.$align.'" hspace="'.$hvspace.'" vspace="'.$hvspace.'" alt="'.$alt.'" widthHeight="'.$widthHeight.'" widthHeight="'.$widthHeight.'"/></center>';
  return $return;
}
add_shortcode('qrpost', 'post_qr_code');

As is demonstrated in the left hand margin of this page, the shortcode of [qrpost] will render a QR Code that links to the current post.

If you use timthumb.php, you could use timthumb to generate the image and cache it locally (meaning you won’t make repeated requests to Google).

If you have any questions, please let me know.

First Name: Your Email Address:

If you liked this article, you may also like:

1. Google Chart WordPress Shortcode
2. Add Your Latest Google Plus Post(s) to Your WordPress Blog (or Generate a Google+ RSS Feed)
3. Convert Currency on your Website or in a WordPress Post (with Shortcode)
4. [Shortcode] Insert Google Adsense with shortcode
5. Website Snapshots with WordPress Shortcode