Register Now

Login

Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Login

Register Now

How to add dynamic QR Codes to Your Website

How to add dynamic QR Codes to Your Website

QR codes are becoming more and more popular in today’s fast-paced society.  From advertisements to business cards to TV commercials, they are quickly becoming very prevalent. In case you are not familiar with them, QR codes are those strange looking square black and white squares that you see every day.  They are used by mobile devices, which scan the image using their built in camera and a dedicated application, and have many interesting uses.  For instance, scan a QR code on a movie poster and you will be taken to a website with more information about that movie.  Scan a QR code on a business card and your phone will prompt you to save the contact’s details automatically.  In this post, I’d like to discuss how it is very easy to not only add QR codes to your website, but to create them dynamically so every page has a QR pointing to itself.

The first thing needed is a way to generate a custom QR code.  While there are many online resources for this, in this example we will be using Google’s free QR code creator, found here:

http://code.google.com/apis/chart/infographics/docs/overview.html

While Google does a great job of explaining how to use this free service, the most important parts to know are:

  • chs = the desired image size (150×150) below
  • cht = the desired format (qr for QR code)
  • chl = the url you are wishing to link to

The line of code below will create an image that will link to this post if you scan it on your phone.  Go ahead and give it a try.

<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=https://www.hostinglogy.com"/>

But what about adding the QR code to every page along with current age URL?

we used javascript to grab the current pages URL.
Here is the full code:

jQuery(document).ready(function(){ callQR(); }); function callQR(){ var url=document.URL; url=encodeURI(url); var fullUrl="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl="+url; jQuery("#QR").attr("src",fullUrl); }
  1. First, you must include jQuery within your pages.  If you are unsure how to do so, more information including the source files can be found here:  http://www.jquery.com
  2. Next, we will change the image code to reference a blank element by setting the src equal to a pound symbol (#).  This will break the image, however in the next steps, we will be overwriting the pound symbol with the current URL. The image code will now look like: <img id="QR" src="#" />
  3. Finally, we will create a jQuery call when the page is finished loading.   jQuery(document).ready(function(){} will run the code within {} once the page has finished loading. In this case, that is the callQR function.
  4. All that is left is to write the code that will get the current page’s url, and then set the source of the image properly.  Above, we have created a function called callQR that grabbed the current url, encoded it properly, and added it to the QR code url in the next lines.  In the final line, we are setting the src attribute of every element with the id “QR”.  This means we must add the proper id to our QR image.

At runtime, the client-side scripting will fire once the page has loaded, grab the current URL, encode it properly, pass it to Google, and then render the QR code image on the browser screen. QR codes have never been easier!

About Ranjan

Well my Name is Ranjan Chatterjee. An Electrical Engineer from Asansol , India. I am the founder of MeraHost and the one behind this blog too. Hostinglogy is a blog created to discuss some common problems regarding Web Hosting , server, domain etc...

Leave a reply