Волторнистый Артём
увлечённый php-разработчик

Нативный просмотр статей в telegram канале через instant view

Автор фото Lana Codes с сайта Unsplash
14 апреля 2024 г.

Недавно я пытался решить проблему - при публикации статьи на сайт, не дублировать содержимое статьи в телеграмм канал. Это занимало дополнительное время + дополнительное оформление + были лимиты на кол-во символов.

Я заметил, что в месенджере может появляться кнопка “Посмотреть”, когда публикуешь ссылку в канале. Я почитал и узнал о сайте https://telegra.ph, на котором можно публиковать материал и потом делиться ссылкой в канале. При переходе по ссылке, месенджер открывает нативный просмотр.

По-началу было ок, но опять же мне приходилось копировать содержимое статьи и, к сожалению, не было подстветки кода.

Через какое-то время я узнал как все-таки называется эта кнопка. Название - instant view.

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

Для начала я использовал простой шаблон:

body:  //article
title: $body//h1[1]

Примеры вы можете посмотреть на сайте, но суть в том, что вам нужно просто указать в таком простом виде из каких html тегов сайта вам нужно доставать содержимое статьи, расположенной на указанной вами ссылки.

Когда вы убедились, что шаблон для статьи подходит и предпросмотр выглядит корректно, нужно нажать “Track changes”.

После того как я добавил все статьи в личный кабинет, то это выглядело следующим образом:

После того как статью вы сохранили и убедились в корректности ее отображения, нужно нажать “View in telegram” и после скопировать ссылку предпросмотра и вставить в пост. Когда вставляется ссылка в пост и вы его публикуете, появляется кнопка “Посмотреть”.

Да, проблема копирования материала у меня пропала, но увы отсутствует подсветка кода в статьях. Вроде как функционал ожидается в будущем, подождем :)

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