В ноябре 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.
Авторизуемся с помощью своего аккаунта в телеграм и нам предлагают ввести наш первый 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 строки. И всё будет выглядеть примерно так...
