Instant View для Telegram — это инструмент предварительного просмотра предложенного ресурса. Он позволяет открыть страницу во встроенном браузере мессенджера, а не в штатном для устройства. Таким образом ваш читатель всегда останется на канале, а не уйдет изучать другой ресурс.
Как это работает
Мгновенный просмотр (Instant View) позволяет просмотреть содержимое ссылки сразу, без дополнительных загрузок и открытия лишних приложений. Помимо текста поддерживается и медийное содержимое. Сайт, на который вы ссылаетесь, может и не иметь мобильной версии. При этом читатель увидит именно ту информацию, которую вы хотите представить.
Линк с возможностью Instant View имеет внизу кнопку с изображением молнии и подписью «Посмотреть» или «View». Она добавляется, если для сайта был сделан шаблон быстрого просмотра. Его может создать автор канала или поста, а также разработчик сайта.
Что такое шаблон Instant View в Telegram
Шаблон – это набор правил и команд, которые указывают – какую информацию с исходной страницы следует выбирать. Бот Instant View следует этим инструкциям и с указанного сайта выбирает нужную информацию. Затем из нее формируется страница быстрого просмотра в Телеграмм.
Шаблон никак не связан с кодом сайта: при его построении последний не меняется. Здесь просто указываются теги, из которых надо брать данные, и правила, по которым следует это делать.
Как сделать Instant View в Телеграмме
Сначала следует остановиться на правилах построения шаблона Instant View. Их немного и полную информацию можно получить у официальных разработчиков сервиса.
https://instantview.telegram.org/docs
Самой главной единицей API Instant View для Телеграмм являются свойства. Вы должны указать как минимум title и body. Содержимое этих разделов берется с исходной страницы. Для каждого из них вы должны вписать html-тег. Уточнять можно, добавляя его класс или ID. Например:
# В теге article должен присутствовать заголовок H1. Его содержимое и будет выведено как заголовок быстрого просмотра
title: //article//h1
# Заголовком будет содержимое тега DIV с атрибутом id=’title’
title: //div[@id=»title»]
#Тело – текст в теге div с классом subtitle
body: //div[has-class(«subtitle»)]
Можно указывать и текстовую информацию:
author: «Иванов Иван»
Убрать лишние теги можно с помощью команды @remove:
@remove: //div[has-class(«also»)]
В данном примере удаляются все теги div, у которых атрибут class имеет значение «also».
С помощью команды append можно добавлять другое содержимое, например, картинки.
Рассмотрим пошагово:
- Зайдите на сайт и нажмите на кнопку «My templates».
https://instantview.telegram.org/
- Авторизуйтесь. У вас должен быть аккаунт в Телеграмм, подтверждение входа осуществляется через него.
- Укажите URL-адрес любой статьи, для которой нужен Instant View.
- Откроется страница с тремя горизонтальными окнами. В первом показан оригинал. Во втором будем указывать правила. В третьем увидим предпросмотр.
- Чтобы вводить правила, вы должны разбираться в HTML-коде сайта, для которого создаете шаблон.
- Для удобства откройте страницу в браузере и нажмите на ней правую кнопку мыши. Выберите «Просмотреть код». После этого рядом будет открыт фрейм, в котором отобразится исходный код документа. Наводите на любой блок страницы, и его теги будут подсвечиваться. Таким образом вы сможете увидеть все необходимое для построения правил.
- Введите правила в среднее окно.
- В правом сразу же отобразится превью для Telegram, корректируйте правила для достижения желаемого результата программу.
- После создания нажмите кнопку «View in Telegram» (сверху справа), выберите получателя ссылки, и вы получите линк на ваш шаблон.
Такая ссылка работает только для ваших постов. Если вы разработчик сайта и хотите привязать к нему шаблон для любых постов сторонних авторов Телеграмм, следует пройти модерацию у администрации Телеграмм. В настоящее время они проводят конкурс. Всем желающим предлагается список сайтов, для которых нужны шаблоны. Поэтому неизвестно, как долго придется ждать решения, если ваш сайт не входит в этот список.
Теперь вы знаете, как работать с Instant View в Telegram. Чтобы не создавать шаблоны «с нуля», посмотрите примеры здесь https://instantview.telegram.org/samples/
Просто нажимайте на любой, и он откроется в редакторе.