Google Chart API を利用してWebサイトにQRコードを表示

WordPressでサイトを作成している人(私もですが)は、「QR Code Widget」というプラグインを利用すれば、QRコードをウィジェットのサイドバーに表示することができます。

ただ、QRコードを表示するためにプラグインをインストールしたくない!と思ってい人には、
「Google Chart API 」を利用して、QRコードを表示する方法をオススメします。
(私も、「QR Code Widget」のプラグインを使用してましたが、「Google Chart API 」に変更しました。)

Google Chart API (Google.com)のページへ

QRコードを表示するための実際のコード

<img src=&amp;quot;http://chart.apis.google.com/chart?chs=100x100&amp;amp;cht=qr&amp;amp;chl=http://idea-note.com/>

 

▼変更方法 : 変更する箇所は、赤字の部分(2箇所)を変更するだけ!
<img src=”http://chart.apis.google.com/chart?chs=100×100&cht=qr&chl=http://idea-note.com/“>
 

  1. サイズ(100×100の部分:縦×横[px])
    QRコードを表示するサイズ(pixel)になります。縦横の数値は同じ数字を推奨します。
    また小さすぎると読み取りにくくなりますので程々のサイズで。
  2. <例> 100×100の場合

    <img src=&amp;quot;http://chart.apis.google.com/chart?chs=100x100&amp;amp;cht=qr&amp;amp;chl=http://idea-note.com/">
    

    QRコード
     
    <例> 100×50の場合

    <img src=&amp;quot;http://chart.apis.google.com/chart?chs=100x50&amp;amp;cht=qr&amp;amp;chl=http://idea-note.com/">
    

    QRコード

  3. URL(http://idea-note.com/)
    QRコードのアクセス先になります。現在はこのサイトのURLになっています。
    =(イコール) と ”(ダブルクォーテーション)の間を書き換えてください。”(ダブルクォーテーション)は消さないように!

    ●現在閲覧中のページのQRコードを表示したい場合URLの部分を下記にしてください。

    <?php the_permalink(); ?>

簡単な説明ですが、2箇所を変更するだけで使えますし、わざわざ画像を作る手間も省くことができるので気に入ってます。
 
※気がついた点
QRコードのサイズを「110×110」以下に設定した状態で、URLの文字数(http:// も含む)が「32文字」を超えると”31文字”より小さくなります。
▼上が31文字のURL、下が32文字のURLを設定した例(QRコードサイズ:110×110)


QRコードのサイズを110(pixel)以上に設定した場合には小さくなることはありませんでした。(URL文字数が50文字までは、小さくならないことを確認しました。)
オススメは、120(pixel)か、115(pixel)ぐらいが見栄えも良いと思います。


コメントはこちらから