Коли є сайт, і час від часу приходиться ним ділитись з друзями, або заходити на нього з телефона – то буває досить зручно на сторінках розмістити QR код. Коли він знаходиться на сторінці – достатньо просто прочитати його за допомогою камери свого телефону – і ще мить і ми вже на можемо читати публікацію не набираючи посилання.
Я вже в своїх публікаціях розказував про те, як зробити бесплатний генератор QR кодів програмою ZennoPoster, а також про те, як власне зробити QR код з посиланням на потрібний сайт чи сторінку. Проте, ця інформація була більш спеціалізованою. Коли мені самому прийшлось створити QR код на всіх сторінках цього блога – то я зрозумів, що потрібна ще інструкція, яка позволить кожному створити QR код своїми руками.
Так от, базовий принцип простий – створюємо собі html сторінку.
На цій сторінці вставляємо звичайне зображення.
А в атрибуті src вказуємо посилання на генерацію QR кода.
Одним із параметрів вказуємо необхідний сайт чи сторінку в інтернеті, на яку потрібно створити QR код.
Після того, як ми відкриємо цю сторінку в браузері, наприклад Google Chrome, то побачимо на ній свій QR код.
А дальше що з ним робити – вирішуємо самостійно – можна вишивати його хрестиком, можна зробити фотографію і роздрукувати у сусіда на паркані, і навіть на лобове скло в таксі з цілью реклами. Бачив публікації що люди зараз на надгробних плитах гравером наносять QR коди з інформацією на сторінку, де можна дізнатись більше про людину якій встановлено такий пам’ятник. У визначних місцях також встановлюють QR коди, щоб можна було швидко дізнатись додаткову інформацію, наприклад історичну довідку. Навіть інтерактивні голосування на ютубі проводять за допомогою QR кодів – зручно для глядачів.
Приклад коду, який потрібно розмістити всередині тега body:
<div>
<img id="url"
src="https://chart.googleapis.com/chart?chs=350x350&cht=qr&choe=UTF-8&chl="
alt="qr"
width="350px" />
</div>
<script type="text/javascript">
document.getElementById('url').src += window.location.href;
</script>
Принцип його дії такий:
Створюється блок, в якому знаходиться посилання потрібного розміру.
Після чого нижче знаходиться блок JavaScript, який бере URL з адресного рядка браузера.
Добавляє його ще одним параметром до атрибута src вище створеного зображення.
Після чого зображення QR кода загружається, і відображається на сторінці.
В себе на блозі я використовую трішки модифіковану версію, але суть від цього не міняється – можна використовувати будь-який код, головне щоб він генерував QR код.
<div id="qr-code-container" style="display: block;">
<img id="url" alt="qr" width="350px" src="https://chart.googleapis.com/chart?chs=350x350&cht=qr&choe=UTF-8&chl=https%3A%2F%2Fblog.yosyfovych.te.ua%2F%3Fp%3D171">
</div>
<script type="text/javascript">
var currentUrl = window.location.href;
var qrCodeUrl = 'https://chart.googleapis.com/chart?chs=350x350&cht=qr&choe=UTF-8&chl=' + encodeURIComponent(currentUrl);
document.getElementById('url').src = qrCodeUrl;
document.getElementById('url').onload = function() {
document.getElementById('qr-code-container').style.display = 'block';
};
</script>
Все дуже просто, і в моєму випадку не потрібно завантажувати якісь додаткові плагіни для WordPress, не потрібно устанавлювати додаткові розширення в браузер – просто підставляємо посилання на сайт в URL зображення на HTML сторінці – і QR код готовий до використання.