How To Add QR Code To Printed Webpage

0 Flares 0 Flares ×

QR Codes are very useful for any website. You can print the QR code of your website any where and give it to anyone so that they can easily browse your website using a QR code scanner even a cell phone would do the job. But how about printing your QR code on the printed webpages of your articles. Now you might think why do I need to add QR code to my printed webpages? OK, if you have ever printed any webpage then you might have observed that the printed page contains the URL of the webpage either on the header of footer of the page, this will remind you from where did you print the page. But imagine if the URL is too long then the printed page contains a trimmed URL which is not the full URL and you can not use this as it is only the partial URL. Even sometimes there might be a typing error while you want to visit the URL again. So in this case a QR code will work the best. So lets see how to add a QR code to the printed webpage. (In case you want to know How to Create QR Code )

 

How to Add QR Code to Printed Webpage

 

Adding QR Code to your printed webpage is very simple. You just need to add 4-5 lines of CSS code to your web template. Here we will be using CSS media query and media type will be “print”. So whenever some one tries to print your webpage they will also see the QR code of that article URL at the bottom of the article.

To implement this, just add the below lines of code to your web template or add it to the header section of your website.

<style type="text/css">
@media print {
body:after{
content:url(http://chart.googleapis.com/chart?
cht=qr&chs=250x250&choe=UTF-8&chld=H&chl=<<URL>>)
}
}
</style>

In the above code replace the URL with the exact URL of your printed webpage.

 

For WordPress: If you are using WordPress then you can edit your template file and add the below lines of code to it. The most easiest one is edit the header.php file and add the below codes in between the <head> and </head> tag.

<?php if (is_single()) : ?>
 <style type="text/css">
 @media print {
 body:after { content:url (
 http://chart.googleapis.com/chart?cht=qr&chs=250x250&choe=UTF-8&chld=H&chl=<?php the_permalink(); ?>)
 }
 }
 </style>
<?php endif; ?>

Above code for WordPress works only on your posts and since we are using CSS with media=’print’, so when anyone prints the page it will have a QR code inserted at the bottom of the post. Note that here we are using Google Chart API to generate the QR code.

Guru

+Ayodhyanath Guru holds a B.Tech degree in Electrical Engineering and has worked with various prestigious clients in the IT industry and presently working as a Software Engineer. He is a part time blogger and presently authors the Jafaloo.Com blog. Being a tech enthusiast Guru likes to surf the web and blogs about interesting technical topics like How-To guides, freewares, Tutorials, Software, Gadgets, web applications etc. Apart from blogging he likes coding in Java/J2EE and PHP.

You may also like...

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 0 Flares ×