Подключил Telegram Instant View

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

Но все оказалось намного интереснее - на стороне подключаемого сайта не нужно вносить никаких изменений. Нужно зайти на https://instantview.telegram.org/, залогиниться и настроить шаблон для отображения.

Порядок действий

1. Логинимся на сайте
2. Идем в My Templates
3. Добавляем URL своего сайта и в конструкторе шаблонов описываем каким образом получать контент из разметки вашего сайта.

Тут на картинке отметил:

1. Код шаблона
2. Дополнительный код шаблона который уже любезно сгенерирован сервисом. Там правила для обработки виджетов твиттера, ютуба и прочего
3. Кнопка сохраняющая шаблон

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

Я же решил пойти по самому простому пути - просто добавил минимальные данные в шаблоне и сохранил его.

Мой код шаблона Instant View:

1
2
3

body: //article
title: $body//h1[@class="entry-title"]
@remove: $body//div[@class="commentscount"]

Проблема с URL

Вместе с тем здесь есть ложка дегтя - для того чтобы заветная кнопка “Instant View” отобразилось под ссылкой на страницу вашего сайта в Telegram необходимо публиковать ссылку вида - https://t.me/iv?url=https://hmdw.me/restrictions-32/&rhash=5e444ccc0e7e41 где в параметре url ссылка на страницу, а в параметре rhash идентификатор созданного шаблона.

Как я понял есть поддержка Instant View для всего сайта целиком, но в интерфейсе личного кабинета такой возможности я не нашел.

Для того чтобы ссылки были красивыми можно провернуть небольшой трюк с отправкой двух url в посте. Первым должен идти некрасивый URL от Telegram. Для облегчения этой задачи добрыми людьми был написан бот https://t.me/InsViBot. Более подробно о проблеме и ее решении можно почитать на Хабре.

Я же пока обнаружил только один косяк - если копировать ссылку из ответа бота то она неправильно подсвечивается:

Пока исправляю это вручную дописывая “https” перед : и удаляя затем прежний тест “https” при вставке ссылки. В таком случае обе ссылки сохраняются и все правильно подсвечивается.

Проблема остается только конкретно с моим сайтом - в IV дублируется заголовок. Пока не знаю как это починить.

Впечатления от сервиса такие же как и от другого детища Telegram - https://comments.app/, основной функционал присутствует и работает все быстро. Но при этом есть ощущение сырого продукта в котором не хватает каких-то мелочей сильно облегчающих жизнь.