When you print any web page, your web browser will automatically add the URL of the site in either the footer or the header area of all the printed pages. This is useful because you will always remember the source website where you printed those pages from.
The problem is that web page URLs can be long and complex and people are likely to make errors typing them into the browser.
An alternative would be that you create a short URL (using bit.ly or goo.gl) and append it all your printed pages. The other more convenient option is that you add a QR code to the printed copy that will link the printed page to the source web page with a quick scan.
A QR Code in the print copy of a web page
Add a QR Code to Printed Web Pages using CSS
You will be surprised to know how easy it is to add a QR code to any web page but before I share the implementation detail, let’s see a live example.
Open any article page (for example, this one) and press Ctrl+P (or Cmd+P on a Mac) to open the Print Preview dialog. Scroll to the last page and you will find a QR code that, upon scanning, would lead you to the source page. (If the QR Code missing, just open the Print Preview dialog again.)
If you are to implement something similar in your site, just add the following snippet to your website template.
<style type="text/css">
@media print {
body:after{
content:url(http://chart.googleapis.com/chart?
cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<<URL>>)
}
}
</style>
*Replace URL with the actual URL of your web page
We are basically adding a QR Code image after the <body> tag and since the CSS media type is set to “print,” the QR Code will only appear in the printed version of the page. The QR Code is generated dynamically using the Google Charts API and will vary based on the URL.
WordPress – To add QR Code support in WordPress print stylesheets, open the template file of your WordPress (like header.php or even index.php) and copy-paste the following code anywhere inside the <head> tag:
<?php if (is_single()) : ?>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<?= the_permalink(); ?>)
}
}
</style>
<?php endif; ?>
Blogger – The equivalent code for classic Blogger templates would be something like this. If you are using the new XML based Blogger templates, you probably need to use data:blog.canonicalUrl (for the permalink) with the condition set as <b:if cond=’data:blog.pageType == “item”‘> since we are only displaying QR codes on individual post pages and not the archives.
<ItemPage><Blogger>
<style type="text/css">
@media print {
body:after { content:url (
http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=<$BlogItemPermalinkURL$>)
}
}
</style>
</Blogger></ItemPage>
No comments:
Post a Comment