Скорочувач посилань на своєму сайті та генерація QR-кодів

Fri, 09 Feb 2024 18:58:17 +0200

Під час роботи над проєктом ознакування в заповіднику Тустані стикнувся з задач показувати на табличках QR код з більш детальною інформацією про обʼєкти. Але самі посиланні вели на wiki-сайт, тому посилання були дуже довгими. Відповідно QR-коди містили більше точок і потреб вали більших розмірів, інакше камера їх просто не зчитувала. Тому треба було мати короткі посилання, які б перенаправляли на потрібні сторінки. Тоді це питання вирішив якось адмін сайту.

Довге посилання, що перенаправляє потім в апці на потрібний розділ

Потім вже в іншому кейсі стикнувся з необхідністю зробити на табличці QR, який в майбутньому можна було б змінити чи перенаправити.

Табличка біля монумента в Ірпені

Авжеж є різні сервіси, на кшталт bit.ly, але опція зміни посилань платна і заради одного-двох випадків не вартує того. Окрім цього будь-які зовнішні сервіси можуть в якусь мить закритись і ніяких даних потім не лишиться, на відміну від надрукованого десь посилання.

Тож я пішов пошукати альтернативи та знайшов два непоганих методи, якщо ви маєте свій сайт чи хостинг. Можливо посилання буде вже не таке коротке, як це було б з коротким доменом, але це дасть зручний інтерфейс, який коротко та у зрозумілому вигляді передавати якісь довгі посилання на ті ж Гугл Документи чи інші сторінки.

htaccess — шлях адміна

Якщо ви адміністратор сайту, то логічно можна прописати редіректи (перенаправлення) у файлі .htaccess. Але це дещо складно адмініструвати та треба знати як.

Наприклад, коли ми міняли структуру сайту А3, то зробили додаткові редіректи, щоб працювали посилання, які були десь використані раніше: a3.kyiv.ua/metromap → a3.kyiv.ua/projects/metromap.

Рядок у файлі виглядає так:

Redirect /metromap /projects/metromap

JS + TXT — найпростіше рішення

Інше рішення яке я знайшов — js-url-shotener — це JS-скрипт, який зчитуватиме введену адресу та окремий TXT-файл в якому зберігатимуться самі редіректи. У самому текстовому файлі перенаправлення записуються у дуже простому вигляді: коротке посилання, далі стрілка з символів => і далі довге посилання.

Shortlink => Longlink

І далі використовуємо посилання має бути через символ решітки #. Наприклад, якщо ми розмістимо скрипт і текстовий файл у піддиректорії з назвою l, то коротке посилання матиме вигляд:

wayfinding.systems/l#a

Як працює скрипт

Плюси:

Все працює максимально просто, як текст.
Якщо посилання зникне чи буде не потрібно, то коротке посилання вестиме на головний сайт і не видаватиме помилку.

Мінуси:

Потрібно додавати до адреси символ #.
Немає адмінки та статистики переходів чи якоїсь аналітики.

Додаємо адмінку

А в якості адмінки, яка дасть доступ не через FTP, а прямо на сайті, є простий файловий менеджер на PHP — Pheditor.

NB: Якщо розмістити всі файли та піддиректорії, то Pheditor матиме доступ тільки до них, а та решти сайту ні.

site.com\l\

Як працює адмінка Pheditor

Yourls — PHP-рішення зі зручною адмінкою та блекджеком плагінами

Якщо маєте хостинг з підтримкою PHP, то є гарне опенсорс рішення, яке ви можете встановити, наприклад, на піддомені — движок Yourls. По факту база даних з адмінкою, в якій ви вписуєте довге посилання і короткий відповідник. Сервіс містить аналітику для відстеження кількості переходів та звідки були ці переходи.

Сайт Yourls

Приємний плюс — можливість створити свій плагін, що розширятиме функції сайту або знайти у цій прекрасній галереї вже готовий. Також можна створити свою тему оформлення, якщо хочете зробити сайт подібним до інших своїх сторінок.

Для оформлення рекомендую тему Sleeky, яка виглядає найбільш сучасно і простою. Плюс ця тема містить модуль для додавання посилань без входу в адмінку, може буде корисно і можна цю сторінку оформити під себе.

Бонус: плагін, що генерує QR-код

Захотілось мати можливість швидко створити QR-код для нових коротких посилань.

Тож зробив плагін, який при додаванні до посилання сполучення .qr, на сайті відкривається окрема сторінка зі згенерованим кодом який можна зберегти у векторних форматах SVG та PDF, або растрових PNG та JPG.

Як працює плагін

Стиль QR-коду за замовчуванням чорний на прозорому тлі, але через параметри можна на це впливати. Наприклад, жовтий код (ff0, без символу #), тло кольору tomato та відступ від краю у 3 клітинки:

color=ff0
background=tomato
padding=3

Якщо ви хочете зафіксувати стиль, який буде застосовувати одразу при генерації, то у файлі плагіну plugin.php пропишіть потрібні параметри, тоді вони передаватимуться разом з текстом.

header('Location: /qr?content='.YOURLS_SITE.'/'.$keyword.'&color=ff0&background=tomato&padding=3');

₴

Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️, задонатити чи підписатись: