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

Швидко. Дуже швидко

Тelegram instant view — технологія, коротка суть якої полягає в можливості миттєво переглянути весь контент сторінки, на яку даємо посилання, прямо у вікні месенджера. Користувачеві не потрібно чекати завантаження, переходити (навіть автоматично) в браузер або взагалі робити що-небудь: тиснемо кнопку «ϟ Instant view» внизу повідомлення і насолоджуємося переглядом.

Сторінка в цьому випадку буде показуватись відповідно до інструкцій, прописаних вами c допомогою XPath 1.0 в шаблоні миттєвих переглядів Instant view template (IVT) і вже готових налаштувань самого telegram-бота.

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

Пробуємо разом

Створімо IVT для довільної публікації. Для цього вам знадобиться робочий додаток Telegram на мобільному або робочому столі, а в пункті №3 подальшої інструкції у вас запитають номер телефону, на який зареєстрована програма. Також бажано мати власний Telegram-канал для кращого перегляду результатів, але це не обов'язково (в крайньому разі канал створюється в три кліка). Ось і все з підготовки, тепер до справи. Я візьму за основу свою попередню статтю з блогу Авіві «Цифров@ епістолярність»:

Насамперед копіюємо посилання на статтю;https://avivi.pro/ua/blog/tsifrov-ya-epistolyarnost/;
Тепер відкриваємо офіційну документацію;
І, власне, сервіс Telegram для створення IVT . Після переходу вказуємо номер телефону і дивимося в свій меседжер — там з'явиться повідомлення.
Вставляємо скопійоване раніше посилання на статтю в єдиному полі на сторінці і тиснемо Enter:
Дія переносить нас в «пісочницю» — місце, де ви зможете все побачити і налаштувати. Простий інтерфейс з трьох колонок відображає оригінал статті, власне шаблон, де показана вся «магія» і результат, який ми отримуємо.
Тепер ми будемо працювати в другій колонці. В першу чергу потрібно вказати на існування потрібної нам сторінки. Якщо у вас, як у мене, Google Chrome, сміливо тисніть F12 у вкладці до статті, і шукайте <head>. Я вибрав meta-тег, який вказує на приналежність статті до запису в блозі. Прописуємо це в IVT.
?exists: /html/head/meta[@content="article"]
Як бачите, можна вибрати навіть потрібний блок з контентом, наприклад:
?exists://div[@class="blog-article"]
Тепер для бота потрібно вказати тіло статті, звідки він буде парсити інформацію:
body: //div[@class="blog-article"]
Намагайтеся вибрати максимально інформативний блок, виключаючи відразу все непотрібне і зайве. До цього відносяться всякі банери, реклама меню та інше, адже миттєвий перегляд потрібен якраз для вичавлювання найнеобхіднішого. Для комфорту надалі можна записати в змінну $body:
$body: //div[@class="blog-article"]
Ну ось і перший результат у третій колонці:

У мене на даному етапі виникла проблема з зображеннями: бот навідріз відмовився їх парсити і вилаявся помилкою:

Але звернувшись до документації XPATH, я знайшов просте рішення, помінявши тег <p>, в який обгорнуте зображення, на <div>:
$body//p/img/parent::p

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

cover: //div[@class="blog-article__img"]/img

title: $body//h1[1]

subtitle: $body//h2

author: $body//div[@class="blog-user__name"]/text()

published_date: $body//div[@class="blog-user__date"]/text()

Тепер результат наших старань видно дуже добре:

Позбавляємося небажаних елементів:

@remove: $body//div[@class="blog-user__left"]

@remove: $body//div[@class="blog-user__img"]

@remove: $body//div[@class="blog-article__row"]

Не забуваємо вказати (якщо є) посилання для свого Telegram-каналу. Це буде дуже корисно для його просування, оскільки дасть можливість охочим приєднається в один клік. Крім цього, ваші пізнання в налаштуванні миттєвих переглядів зіграють на користь вашому іміджу:
channel: "@avivipro"
Після чого з'явиться кнопка для приєднання до нього:
Нарешті, коли все готово, генеруємо посилання для поширення через посилання «VIEW IN TELEGRAM» і отримуємо все, що потрібно.

Творіть самі

Можливо, раніше ви бачили, що кнопка «ϟ Instant view» з'являється, коли ви ділитеся будь-яким посиланням на популярні сайти через Telegram. Це пов'язано з проведеним конкурсом зі створення IVT, де валідні шаблони модератори Telegram схвалили і вони закешувались на серверах. Якщо ваш шаблон не пройшов модерацію, є ще мінімум 2 рішення:

Використовувати API Telegram і писати бота для надсилання постів;
Використовувати готовий (наприклад @ControllerBot).

наступна стаття

Схожі статті

Записатись на консультацію

Ми зв'яжемось з Вами протягом 10 хвилин