Instant View Telegram – новый формат для просмотра ссылок

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

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

Линк с возможностью Instant View имеет внизу кнопку с изображением молнии и подписью «Посмотреть» или «View». Она добавляется, если для сайта был сделан шаблон быстрого просмотра. Его может создать автор канала или поста, а также разработчик сайта.

Как создать шаблон Instant view?

Любой желающий может создать шаблон используя Instant View Editor. После того, как шаблон будет одобрен, все пользователи телеграмм получат возможность просматривать страницу через Instant view.

Instant View Editor

Редактор позволяющий создавать свои собственные шаблоны для любых сайтов. Для того, чтобы начать достаточно перейти в Мои шаблоны и добавить URL-адрес для вашего шаблона и нажать кнопку «Enter». Откроется редактор. Исходная страница будет отображаться в левой части страницы.

Подробнее о публикации шаблонов »

Совет: Используйте инструменты для разработчиков в вашем браузере (например: debug-режим в Chrome) , чтобы изучить HTML разметки страницы.

В средней части страницы находится рабочее поле, где вы создаете шаблон для выбранного доменного имени или URL.

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

Примеры шаблонов

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

Вы можете  экспериментировать с данными шаблонами и посмотреть, как они изменяются. Не волнуйтесь, ваши изменения не будут применены к фактическим Instant view страницам, которые могут видеть обычные пользователи телеграмм.

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

Быстрый просмотр (от англ. Instant View) в Telegram упрощает использование мессенджеров до минимума. Если вам необходимо перейти на сайт, то при помощи 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 с классом subtitlebody: //div[has-class(«subtitle»)] Можно указывать и текстовую информацию:author: «Иванов Иван» Убрать лишние теги можно с помощью команды @remove:@remove: //div[has-class(«also»)]Для ознакомления всё будет выведено в окно предпросмотра. Если всё устраивает, то нажимаем на «View in Telegram» и отправляем ссылку в телеграмм.

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

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

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

Когда вы отправляете ссылку через телеграмм, формируется предварительный просмотр сайта. Бот-парсер проверяет эту ссылку и определяет, имеется ли у этого сайта Instant view шаблон. Шаблон представляет собой набор правил и инструкций, по которым бот отбирает информацию и строит instant view страницу.

Если для URL есть шаблон, то бот использует его для нахождения нужной информации на странице (заголовки, текст, элементы), удаляет весь беспорядок  и создает тонкую, красивую и удобную Instant view страницу. Помимо ранее сказанного о снижения размера страниц, есть еще кое что.

Instant View страницы чрезвычайно легки и кэшируются на серверах Телеграмма, поэтому они загружаются мгновенно почти любой связи — отсюда и название. Больше не нужно ждать загрузку неуклюжих сайтов, теперь вы можете получить все и сразу!

Наглядный пример

Слева — оригинал, справа — обработанная страница.

Даже если сайт не был оптимизирован для мобильных устройств, он все равно будет выглядеть удобно (во всех смыслах этого слова) через instant view.

Самое главное, что автору сайт ненужно ничего менять на своем сайте для того, чтобы он начал работать через моментальный просмотр в телеграмм.

Технология мгновенного просмотра

Среди современных пользователей востребована функция открытия ссылок прямо в приложении. Помимо Телеграмм, такая опция есть, например, в приложениях ВКонтакте и Google Search. Это удобно, как минимум, по двум причинам:

• Экономия интернет-трафика и вашего времени: контент сжимается и адаптируется под мобильные устройства, не тратятся драгоценные секунды на запуск обычного браузера, в результате страницы загружаются почти мгновенно.
• Более удобный для восприятия формат. Многие интернет-ресурсы не имеют специальной версии для смартфонов, текст и изображения слишком мелкие и их тяжело просматривать. Технология быстрого просмотра берет из источника только полезное содержимое (в том числе видео и картинки), и приводит его в читабельный вид. И больше никакой рекламы.

Чтобы обеспечить быстрое открытие ссылок, приложению необходимо иметь собственный встроенный браузер. Он и будет моментально отображать содержимое, генерируя специальные страницы.

Instant view для своего сайта

При создании шаблона для Instant view вы должны придерживаться 4 правил:

• Создаем правила только для тех страниц, которые действительно в этом нуждаются.
• Необходимо захватить все важное содержимое с исходной страницы.
• Все ненужные элементы должны быть исключены из шаблона.
• Шаблон должен хорошо работать с любой страницей сайта.

Смотрите также: Наш идеальный шаблон »

Это лишь краткое изложение того, что вы могли бы сделать.

Instant view страницы предлагают неограниченные возможности.

Используемые источники:

• https://telegramzy.ru/instant-view/
• https://tgrm.su/blog/news/chto-takoe-instant-view/
• https://telegrammix.ru/soobshheniya/kak-sdelat-instant-view-v-telegramme.html
• https://ru.telegram-store.com/blog/platforma-instant-view-v-telegramm/