Фёдор Борщёв

Как сделать Instant View для любого сайта

Илья Бирман сетует, как криво в телеграме устроен Instant View. Насчет кривости я не согласен — он просто для гиков. Ниже я подробнее расскажу почему это не криво, а так же отвечу на вопрос Ильи как сделать, чтобы Instant View появился на вашем сайте.

Instant View отличается от AMP или Яндекс-Турбо тем, что требует меньше всего усилий от паблишера — чтобы сайт начал моментально загружаться в телеграме, не нужно вносить никаких изменений в коде страницы. Достаточно написать шаблон, который преобразует уже существующую разметку в соответствии с требованиями телеграма, и отправить его на http://instantview.telegram.org. Шаблоны хранятся на сервере телеграма.

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

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

Две ссылки на одну и ту же статью, одна с Instant View, другая — без

Две ссылки на одну и ту же статью, одна с Instant View, другая — без.

К сожалению, на сайте Instant View написано, что конкурс завершен, и когда будет новый — нам перезвонят сообщат. Но если вы очень хотите отправлять подписчикам ссылки с красивой кнопочкой, то способ все-таки есть — нужно отправлять им специальные ссылки, которые содержат идентификатор вашего шаблона.

Для этого нужно пройти регистрацию в InstantView, создать и проверить шаблон, а затем получить его идентификатор. Это делается на странице редактирования шаблона для любой ссылки на сайте:

Редактирование шаблона Instant View

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

Универсальная ссылка Instant View

По этому образцу и нужно формировать ваши ссылки: https://t.me/iv?url=<страница>&rhash=<ид шаблона>. К примеру, для этой заметки ссылка будет вот такой: https://t.me/iv?url=https://borshev.com/instant-view/&rhash=5ef08d16e14be6. Если ее отправить другу в телеграм, то он увидит кнопку Instant View.

В «Лайклях» ссылку на Instant View можно задать через параметр data-url:

Добавить Instant View в likely

Увы, все эти манипуляции не отменяют необходимости читать инструкции и ковыряться в наркоманском XPath, чтобы сделать шаблон для вашего сайта. Если не хотите сами — обратитесь к знакомому веб-технологу, сделать простой шаблон на основе официальных примеров можно за несколько часов.