В этом небольшом посте мы рассмотрим как вставить в шаблон Google Blogger отображение QR Code'а текущей открытой страницы. Собственно давно хотел реализовать у себя и помогли мне в этом эти две статьи:
1. Manually adding a Disqus gadget to Blogger
2. Как разместить QR-код на странице для печати
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 = "<data:blog.canonicalUrl/>";
var qr_code_url = 'http://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=H&chl=';
var quote = '"';
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> динамически. Результат вы можете увидеть в моем блоге в правой колонке под счетчиком просмотров.
Комментариев нет :
Отправить комментарий