Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Мгновенно делимся статьями в Telegram!

Мгновенно делимся статьями в Telegram!

25 Февраля 2019
Николай Гоцалюк
Frontend TeamLead
Николай Гоцалюк
следующая статья

Если вы до сих пор не используете Telegram, то сейчас самое время начать. Для всех пользователей может быть интересна статистика этого нестандартного мессенджера, которая указывает на позитивную динамику приобретения им популярности. И здесь нет хитростей: открытый код и свежие рационализаторские идеи ежедневно пополняют Telegram новыми полезными фичами, которые дают преимущество над конкурентами. Мгновенный просмотр страниц — одна из них.

Быстро. Очень быстро

Тelegram instant view —  технология, краткая суть которой заключается в возможности мгновенно просмотреть весь контент страницы, на которую даем ссылку, прямо в окне мессенджера. Пользователю не нужно ждать загрузку, переходить (даже автоматически) в браузер или вообще делать что-либо: жмем кнопку  “ϟ Instant view” внизу сообщения и наслаждаемся просмотром.

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

Все это ориентировано непосредственно на получателя информации. Он будет видит только нужные данные, не отвлекатся на сопутствующий контент, экономить время и даже ресурсы, если этот вопрос важен для пользователей с ограниченным трафиком. Валидный шаблон также позволит вашему контенту кешироватЬься на серверах Тelegram.

Пробуем вместе

Давайте создадим IVT для произвольной публикации. Для этого вам понадобится рабочее приложение Telegram на мобильном или десктопе, а в пункте №3 последующей инструкции у вас запросят номер телефона, на который зарегистрирована программа. Также желательно иметь собственный Telegram-канал для лучшего просмотра результатов, но это не обязательно (в крайнем случае канал создается в три клика). Вот и все по подготовке, теперь к делу. Я возьму за основу свою предыдущую статью из блога Авиви Цифров@я Эпистолярность:

  1. Первым делом копируем ссылку на статью https://avivi.pro/blog/tsifrov-ya-epistolyarnost/;

  2. Теперь открываем официальную документацию;

  3. И, собственно, сервис Telegram для создания IVT . После перехода указываем номер телефона и смотрим в свой месседжер — там появится уведомление.

  4. Вставляем скопированную ранее ссылку на статью в единственном поле на странице и жмем Enter:

  5. Действие переносит нас в “песочницу” — место, где вы сможете все увидеть и настроить. Простой интерфейс из трех колонок отображает оригинал статьи, собственно шаблон, где происходит вся “магия” и получаемый результат.

  6. Теперь мы будем работать во второй колонке. В первую очередь нужно указать на существования нужной нам страницы. Если у вас, как у меня, Google Chrome, смело жмите F12 во вкладке со статьей, и ищите — <head>. Я выбрал meta-тег, который указывает на пренадлежность статьи к записи в блоге. Прописываем это в IVT.

     ?exists: /html/head/meta[@content="article"]
    

    Как видите, можно выбрать даже нужный блок с контентом, например:

    ?exists://div[@class="blog-article"]
    
  7. Теперь для бота нужно указать тело статьи, откуда он будет парсить информацию:

     body: //div[@class="blog-article"]
    

    Старайтесь выбрать максимально информативный блок, исключая сразу все ненужное и лишнее. К этому относятся всякие банеры, реклама меню и прочее — ведь мгновенный просмотр нужен как раз для выжимки самого необходимого.  Для комфорта в дальнейшем можно записать в переменую $body:

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

    Ну вот и первый результат в третьей колонке:

    У меня на данном этапе возникла проблема с изображениями: бот напрочь отказался их парсить и выругался ошибкой:

    Но обратившись к документации XPATH я нашел простое решение  поменяв тег <p>, в который обернуто изображение, на <div>:

     $body//p/img/parent::p
    
  8. Теперь уже время наводить красоту в шаблоне: указываем заголовок, подзаголовок, дату публикации, фото автора. Бот уже постарался за нас, но из опыта скажу, что часто ему не удается все сделать правильно. Иногда ему мешает разметка страницы, иногда — неведомая сила. Но если уж делать вручную, нужно сделать все правильно:

    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()

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

  9. Избавляемся от нежелательных элементов:

    @remove: $body//div[@class="blog-user__left"]
    @remove: $body//div[@class="blog-user__img"]
    @remove: $body//div[@class="blog-article__row"]
  10. Не забываем указать (если есть) ссылку для своего Telegram-канала. Это будет весьма полезно для его продвижения, поскольку даст возможность желающим присоединится в один клик. Кроме этого, ваши познания в настройке мгновенных просмотров сыграют на пользу вашему имиджу:

     channel: "@avivipro"
    

    После чего появится кнопка для присоединения к нему:

  11. Наконец, когда все готово, генерируем ссылку для распространения через ссылку ‘VIEW IN TELEGRAM’ и получаем все, что нужно.

Творите сами

Возможно ранее вы видели, что кнопка “ϟ Instant view” появляется, когда вы делитесь какой-либо ссылкой популярних сайтов через Telegram. Это связано с проводимым конкурсом по созданию IVT, где валидные шаблоны  модераторы Telegram одобрили и они закешированы на серверах телеги. Если ваш шаблон не прошел модерацию, есть еще минимум 2 решения:

  • Использовать API Telegram и писать бота для отправки постов;

  • Использовать готовый (к примеру @ControllerBot)

Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут