Как легко сделать Instant View для Telegram

Наверняка вы замечали в Telegram каналах ссылку, а под ней кнопку Instant View.

Наверняка вы задавались вопросом — как это сделать для себя?

Для начала нужно перейти на сайт https://instantview.telegram.org и залогиниться через Telegram. На этом сайте есть мануалы и примеры верстки страниц: medium.com, telegra.ph, telegram.org.

Необходимо добавить страницу на примере которой будем делать шаблон. Этот шаблон в дальнейшем будет использоваться для остальных страниц.

Переходим дальше и видим 3 поля:

1. Оригинальная страница
2. Правила для отображения Instant View
3. Предварительный просмотр

Первая и самая важная задача — определить тело страницы (body), которое будет отображаться правильно.

Для этого можно использовать любой браузер и функцию “просмотреть код элемента”. При наведении на необходимые теги, на странице отображается участок страницы, что легко помогает определить нужный нам. В качестве примера я беру страницу со своего сайта https://shatmanov.com/blog/sozdanie-svoego-personazha-v-griffinah.html. Ниже приведены 2 скрина охвата контента блоком div с классом “content”. Необходимо выбрать максимально информативный участок страницы без лишних блоков и заголовка статьи.

Это не обязательно должен быть div, может быть article, p и другие. Самое главное, чтобы можно было идентифицировать нужный блок.

Добавляем строку: body: //div[has-class(“content”)] в правила нашего шаблона, где “content” есть class моего div блока (см. скриншот выше).
Следующим шагом добавим строку: title: //h1[has-class(“single-blog-title”)], где “single-blog-title” class моего заголовка

Теперь Telegram понимает, что отображать в Instant View, и получаем следующую картину.

Теперь можно добавить картинку публикации, дату публикации и автора.
У меня на сайте есть мета-теги Open Graph:

Поэтому я буду использовать их для отображения остальных данных. Вы же можете сделать по примеру как с заголовком.

Добавляем строку: @append(<img>, src, @content): //meta[@property=”og:image”] в правила нашего шаблона. В Этом правиле мы берем из мета-тега ссылку на изображение и конвертируем в картинку. Следующей строчкой добавляем: cover: $@ — здесь мы получим изображение и вставим в качестве обложки.
В новой строке пишем: published_date: //meta[@property=”article:published_time”]/@content в правила нашего шаблона, здесь мы получаем данные с мета-тега article:published_time — это дата публикации статьи.
Осталось добавить автора, для этого в новой строке пишем: author: //meta[@property=”og:site_name”]/@content все так же получаем из мета-тега автора.

Можно параметры прописать жестко, например автора: author: “zhan.shatmanov”

В итоге мы увидим:

Помимо этого вы можете в шаблон вашего сайта вставить мета-тег: <meta name=”telegram:channel” content=”@zhan_shatmanov”>
После этого в шапке вашей страницы, можно сделать блок, в котором будет отображаться название вашего канала и кнопка “Присоединиться”.

После всего, нужно сохранить шаблон и нажать на кнопку View in Telegram. В правом верхнем углу. После этого вы получите ссылку вида: https://t.me/iv?url=https%3A%2F%2Fshatmanov.com%2Fblog%2Fsozdanie-svoego-personazha-v-griffinah.html&rhash=3008ea592440bf где выделенное жирным — ссылка на вашу статью.

В итоге видим следующее

Это поможет вам улучшить свой Telegram канал!