Browsed by
Category: HTML

Dynamically generate QR-code using Google Chart Tools

Dynamically generate QR-code using Google Chart Tools

Do you like QR-codes and want to use them on your website? Well, here is some information about how to achieve this. Google has a Chart API which supports generation of QR-codes. By using this API you can dynamically generate your QR-codes.

The following example shows the Hello World QR-code as shown with this post.

[html]

https://chart.googleapis.com/chart?cht=qr&chl=Hello+world&chs=75×75

[/html]

The standard base URL for Google Charts is: https://chart.googleapis.com/chart. By adding the needed parameters you can adjust the QR-code:

  • chs=<width>x<height>: Size of the image in pixels
  • cht=qr: The chart type is QR-code
  • chl=<data>: The data to encode. Must be URL-encoded

For more information about the API see https://code.google.com/apis/chart/infographics/docs/overview.html

If you are a WordPress user, you can use the following code as an example for adding dynamic QR-codes with each post.

[php]
// Use the_permalink() function to dynamically generate the QR-code
<img
src=’https://chart.googleapis.com/chart?cht=qr&chl=<?php the_permalink(); ?>&chs=75×75′
/>
[/php]

You can add this code anywhere in the index.php of your theme inside the following loop:

[php]
<?php while (have_posts()) : the_post(); ?>
<img src=’https://chart.googleapis.com/chart?cht=qr&chl=<?php the_permalink(); ?>&chs=75×75′ />
<?php endwhile; ?>
[/php]

Disable context menu and text selection in browser

Disable context menu and text selection in browser

When you build websites you do not always want visitors to be able to use the context menu or to be able to select the text from the site. To disable the context menu add to following code to the <body> tag of your website:

[html]
<body oncontextmenu=’return false’>
[/html]

To disable text selecting, add the following code to the <body> tag:

[html]
<body ondragstart=’return false’ onselectstart=’return false’>
[/html]

Take into consideration that not all browsers support these features.