Как отобразить QR Code со ссылкой на статью в Google Blogger?

В этом небольшом посте мы рассмотрим как вставить в шаблон Google Blogger отображение QR Code'а текущей открытой страницы. Собственно давно хотел реализовать у себя и помогли мне в этом эти две статьи:

1. Manually adding a Disqus gadget to Blogger
2. Как разместить QR-код на странице для печати

Из второй я узнал про сервис chart.googleapis.com, а из первой, скажем так, про возможность "манипулирования" контентом из JavaScript, ибо, напрямую нужный URL, а также переменную для определения текущего URL положения пользователя в шаблон Blogger схожу вставить не получилось. Поэтому и был применен JavaScript, как в первом примере.

Что нам потребуется? Добавить в дизайн блога HTML/JavaScript виджет и разместить его в нужном месте. После чего перейти в редактор HTML щаблона Google Blogger и заменить часть между <b:includable id='main'> и </b:includable> на следующую (сначала картинка, потом сам код):

Или в виде кода:

<b:widget id='HTML1' locked='false' title='QR Code' type='HTML'>
<b:includable id='main'>
<div align="center">
  <script type='text/javascript'>
 var blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
 var qr_code_url = 'http://chart.googleapis.com/chart?cht=qr&amp;chs=200x200&amp;choe=UTF-8&amp;chld=H&amp;chl=';
 var quote = '&quot;';
 document.write('<img src='+quote+qr_code_url+blogger_current_url+quote+'/>');
  </script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

По-быстрому вставить QR Code вместо тела виджета HTML у меня получилось только так. Т.к. у меня в блоге используется новый XML шаблон, то в нем надо использовать data:blog.canonicalUrl вместо <$BlogItemPermalinkURL$>. Ну и чтобы синтаксический анализатор платформы не ругался на кавычки, амперсанды и т.п., проще всего было сгенерировать соответствующий тег <img> динамически. Результат вы можете увидеть в моем блоге в правой колонке под счетчиком просмотров.