Instant View в Telegram или как сделать свой канал немного симпатичнее.

В ноябре 2016 года Telegram представил нам технологию Instant View. Я как и полагается начал разбираться с этой штукой в середине 2021)) Так что это за зверь такой, для чего он нужен и как его готовить? Давайте попробуем разобраться на примере статей в Teletype.

Instant View - это функция быстрой загрузки страниц прямо в Telegram. Очень удобная штука с точки зрения пользователя.

Вот представьте, листаете вы какой-то новостной канал, в котором постятся только превьюшки постов и ссылочки. И вас заинтересовал один пост, который вы решаете прочесть более чем полностью. Жмете на ссылку... Дальше открывается браузер, прогружается страница и вот это вот всё занимает какое-то количество бездарно потраченного времени. С Instant View всё происходит гораздо быстрее. У вас открывается не полноценная версия поста, а его облегченная версия, а открывается она прямо в окне Telegram. В итоге вы уже читаете пост менее чем через секунду. Удобно? Конечно!

Теперь давайте думать как владелец канала... Нам нужно чтобы пользователю было красиво и удобно. Instant View - нам поможет. Погнали делать.

Я в своём "экспериментальном" канале убедился, что телега не умеет Instant View для постов из Teletype из коробки, как например для Medium или Telegraph. Будем исправлять это недоразумение.

Топаем на сайт https://instantview.telegram.org и в меню справа жмахаем на My Templates.

Вот тут находится My Templates

Авторизуемся с помощью своего аккаунта в телеграм и нам предлагают ввести наш первый URL поста, который будет трекаться и показываться в кошерном виде.

Вводим урлу на свой пост

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

Внешний вид редактора

Чтобы понимать, что нас ждёт листаем мануал и пугаемся, что мы не сможем. Смотрим примеры и ещё больше пугаемся. А потом, помолясь, начинаем ваять своё instant-чудо.

Итак, основное что нам нужно - это title (заголовок поста) и body (основа). В большинстве простых случаев этого предостаточно. Как узнать где взять всё это? Открываем инструменты разработчика (Ctrl+Shift+I) на страничке вашего поста и смотрите где у вас располагается Заголовок и Тело.

Вот тут, например.

И тогда нам вполне достаточно такого кода

~version: "2.1"
title: //h1[has-class("article__header_title")] # Заголовок
body: //article[has-class("article__content text")] # Тело

Но у меня конечно же счастья не случилось, потому что у меня оказались вставочки, которые EMBED_NOT_SUPPORTED

Embed not supported yet: <iframe src="https://open.spotify.com/embed/"/>
Embed not supported yet: <iframe src="https://music.yandex.ru/iframe/"/>
________________________________________________________________________
An error has occurred while processing your template

Это коды вставки плееров Spotify и Яндекс.Музыки. Эти iframe телеграм не понимает, но видео с ютюбчика, например умеет. Вот полный список того, что инстант вью прожуёт:

Youtube
Vimeo
Tweets & Twitter Videos
Facebook Posts & Videos
Instagram
Giphy
SoundCloud
GithubGist
Aparat
VK.com Videos

Как видим, нужных нам плееров нет, поэтому начинаем чистить всё, что может быть лишним. Сначала я решил, а что если я возьму в качестве Тела весь div с классом "article__container", но оказалось что чистить придётся много, потому что помимо того что нужно, есть и мусор.

Всё что нам не нужно, мы можем убрать с помощью @remove. Получилось вот так:

~version: "2.1"
body: //div[has-class("article__container")]
@remove: //div[has-class("article__scheduled")]
@remove: //div[has-class("article__info")]
@remove: //header
@remove: //iframe[contains(@src,"spotify.com")]
@remove: //iframe[contains(@src,"music.yandex.ru")]

Зачем создавать себе лишний гемор? Правильно, не надо. Поэтому я вернулся к первоначальной версии и добавил только удаление фреймов, которые содержат в параметре src упоминание spotify или yandex. Получилось коротко и понятно.

~version: "2.1"
title: //h1[has-class("article__header_title")]
body: //article[has-class("article__content text")]
@remove: //iframe[contains(@src,"spotify.com")]
@remove: //iframe[contains(@src,"music.yandex.ru")]

Когда в превью мы получили то, что порадовало наш глаз, жмём двумя пальцами на Track Changes. И в принципе всё, можно публиковать.

Итак, что я понял? Что не так страшен Instant View как могло показаться с самого начала. В итоге, привести к красивому виду можно ~~практически~~ любой сайт. Нужно только совсем немножко вашего времени. Что касается Teletype, то если вы не используете чужеродных фреймов, то для интстанта достаточно всего 2 строки. И всё будет выглядеть примерно так...

Итоговый результат