Как сделать Instant View в Телеграмме

Instant View – это инструмент, позволяющий просматривать различные сайты во встроенном браузере мессенджера. Таким образом, если вы владеете каким-либо сайтом и вам следует встроить свою страницу в мессенджер, то для этого не нужно обращаться в поддержку. Для этого потребуются небольшие знания HTML-кода, и вы сможете встраивать свой сайт в телеграмм без проблем. Далее разберемся в работе и настройке Instant View в Telegram.

Как это работает

Быстрый просмотр (от англ. Instant View) в Telegram упрощает использование мессенджеров до минимума. Если вам необходимо перейти на сайт, то при помощи Instant View вы сделаете это просто без всякого стороннего софта. Telegram сам откроет сайт, даже если в нем нет мобильной версии и вы сможете просмотреть именно ту информацию, которая вам нужна. Ниже это проиллюстрировано на картинке.

Как мы видим, кнопка «Посмотреть» отображается с картинкой и кратким содержимым, а сама она расположена слева внизу ссылки. Эта функция всплывает, если на сайте работает шаблон для быстрого просмотра ссылок. Его может сделать автор сообщества или разработчик сайта.

Что такое шаблон Instant View

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

Как настроить Instant View в Телеграмме

Перед началом создания быстрого просмотра ссылок следует ознакомиться с созданием правильных шаблонов на официальном сайте  https://instantview.telegram.org/docs. Важно понимать, что для работы с Instant View должны быть минимальные знания HTML-кода. После ознакомления правил можно перейти к настройке самой разработки.

Инструкция:

1. Переходим на сайт https://instantview.telegram.org и авторизуемся под своим логином от телеграмма. Далее открываем вкладку «My Templates».
   
2. В появившемся окне мы видим адресную строку, в которую следует ввести URL-ссылку своего сайта.
   
3. Итак, мы ввели ссылку на сайт и теперь видим 3 окошка. В первом отображается оригинал, во втором правила, по которым будет работать ваш Instant View, а в третьем – предпросмотр содержимого.
   
4. Далее мы вводим правила в среднее окошко.
   Например:
   # В теге 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»)]Для ознакомления всё будет выведено в окно предпросмотра. Если всё устраивает, то нажимаем на «View in Telegram» и отправляем ссылку в телеграмм.

   Содержимое для всех  разделов берется с исходной страницы браузера. Для каждого нужно вписать html-тег. Можно добавлять ID или класс элементов .
   

5. Готово. Теперь ссылка в телеграмм канале отображается с функцией Instant View.
   

Видео: детальная инструкция настройки Instant View в Telegram

Оказывается, всё довольно просто. Теперь вы знаете как просто сделать Instant View в телеграмме. Для это нужно просто зайти на сайт, с поддержкой Instant View и ввести нужные правила.