2013年5月11日 星期六

在部落格中顯示每篇文章網址QR Code

QR Code 現在很流行,你是否想要在部落格的每篇文章中顯示一個 QR Code,方便行動裝置來閱讀?利用 Google 提供的 API,很簡單就能達成這個工作。

如果你需要某個部落格網址的 QR Code,可依以下格式輸入網址:

https://chart.googleapis.com/chart?chs=寬度x高度&cht=qr&chl=網址&choe=UTF-8

【例】https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=http://isvincent.blogspot.com&choe=UTF-8

點選以上網址,會產生一個 200x200 的QR Code PNG 格式圖形檔,你可用手機掃這個 QR Code。其中 QR Code 圖形檔的大小可以自行設定。

如果在網頁中,可以使用以下的語法:

<img src="https://chart.googleapis.com/chart?chs=寬度x高度&cht=qr&chl=網址&choe=UTF-8">

但是,如果你是要在部落格的每一篇文章中,自動產生該篇文章的 QR Code 圖形檔,以 Blogger 為例,要先增加一個 HTML/JavaScript 小工具:

將以下的公式,複製後填入:

<div id="qrcode"></div>
<script>
var img = document.createElement('img');
img.src = 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=' + encodeURIComponent(document.location.href);
document.getElementById('qrcode').appendChild(img);
</script>

部落格中的每篇文章,即會產生各自的 QR Code:

這樣就可以利用 Google 的 API 免費產生一個網頁的 QR Code 圖形,你可以用來放在部落格文章或是設計好的線上問卷調查表單中,讓有行動裝置的人也能方便來填答問卷。

 

【補充說明】

如果你將網址在 http://goo.gl 中產生短網址,點選某個網址的 Details:

其中有該短網址(非原來網址)的 QR Code:

沒有留言:

張貼留言

好康東東