QR (Quick Response) code is a two-dimensional bar code consists of black rectangular modules arranged in a square pattern on white background. QR codes can digitally store more data than the standard barcodes. QR code was used for the first time in Japan in 1994 but it became popular only in the last 3-4 years. Thanks to the iPhones and Androids. Almost all the smartphones have QR code readers and the reading of codes takes just few seconds. We may soon see QR Codes storing addresses and URLs appearing in magazines, on signs, buses, business cards, etc. QR codes can be used on your web pages to improve the mobile experience of your users. Making each link on your page available as a QR code will allow the users to quickly navigate to that link on their mobiles.
Steps to be followed to add QR code for the links on your web page:
1. Include the jQuery library (if you have not included already) and jQuery.cluetip plug-in from within the HTML <head> section. Download it from here. [JavaScript experts may want to try this asynchronously loading JavaScripts. Link.]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>
2. Copy the following HTML snippet and paste it just before closing the </body> tag. The snippet uses Google charts for generating the QR code and the jQuery plug-in cluetip is used for showing the bubble.
<div id="divQR" style="background-color: #D9E6F7; border:4px solid #C1D9FF; text-align:center; display:none;
font-family:calibri;-moz-border-radius: 5px;-webkit-border-radius: 5px;width:200px;height:380px;padding:-5px;">
<img id="imgQR" src="" width="200" height="200" alt="" />
<p align="justify" style="padding-left:15px;padding-right:15px">QR code will be shown for each link on
hovering over it. Scan the QR code above using the Barcode Scanner from your smart phone, and the link
will be instantly accessible on your phone.
</p>
</div>
<script type="text/javascript">
$.fn.cluetip.defaults.dropShadow = false;
$.fn.cluetip.defaults.onActivate = function(e) {
if (e.length > 0) {
var anchor = e.context;
var link = anchor.href;
if (link.indexOf("javascript:") == 0)
return false;
$("#imgQR").attr("src", "http://chart.apis.google.com/chart?chf=a,s,000000&chs=200x200&chld=|2&cht=qr&chl=" + encodeURIComponent(link));
$("#imgQR").attr("alt", anchor.innerText);
return true;
} else
return false;
};
$("a").attr("rel", "#divQR");
$("a.qrLink").cluetip({local: true, hideLocal: true, showTitle: false, clickThrough: true});
</script>
3. Set the attribute class to “qrLink” for all the hyperlinks that you want to show as QR codes.
<a class="qrLink" href="http://blog.varunkumar.me" >Varun's ScratchPad</a>
4. Done. Hover over the hyperlinks to see their QR codes. Scan the codes from your mobile and navigate to the links quickly from your mobile.
Generate QR Code for hyperlinks on all the web pages
If you want to generate QR code for hyperlinks on all the web pages, use this GreaseMonkey script. It works only on Firefox as of now. Download and install GreaseMonkey add-on. Point your browser to this link. Now, the QR code will be shown on hovering over any of the hyperlinks on any web page.
-- Varun
Google App Script for Google Sites
