Telegram — Instant View для любого сайта

telegram instant view - Telegram — Instant View для любого сайта

Все на скриншоте пример статьи с данного сайта, опубликованной в Telegram при помощи Instant View (далее IV). Делается легко, дальше разберем как!

Ссылка на пост: https://t.me/devartspro/9
Ссылка на сайт: https://devarts.pro/736-traders-diary-w2.html

И сразу неприятная особенность — Instant View работает по базе ссылок, одобренных телеграм. Если ваш сайт не прошел модерацию, то мессенджер не станет автоматически заворачивать вашу ссылку в IV. Для этого используется костыль! Но он не сложный и его можно частично автоматизировать. Правильнее будет назвать это чуть более упрощенным постингом.

Шаблон Instant View

Заходим на сайт https://instantview.telegram.org/my/. Это официальный редактор, база данных и вообще всего, что связано с IV. Необходимо авторизоваться, для этого понадобится Telegram.

В разделе My Templates увидим форму для ввода адреса. Главную страницу туда добавлять смысла нет, поэтому используйте любую статью, которую хотите подготовить для IV. На базе будущего шаблона будут генерироваться все следующие ссылки-шаблоны.

В качестве примера можете использовать мою ссылку (см. выше)

telegram instant view template editor - Telegram — Instant View для любого сайта

Мы попадаем в панель редактора шаблонов. В правом окне у вас гарантированно ничего не будет. Смысл следующий:

  • Указать CSS-класс контейнера вашей статьи (именно статьи, не правой части сайта);
  • Указать тег H1;
  • Указать картинку, которая будет выводиться в завернутом посте (по умолчанию не идет);
  • Убрать из отобранного контента все лишнее (похожее, комментарии, рекламу, прочее), т.е. предоставить чистую страницу с контентом статьи (текст, графика поста) и все;

Используется встроенный мета-язык. Не знаю как называется, но достаточно прост и очень напоминает нечто среднее между jQuery и CSS.

body: //div[has-class("full")]
cover: //div[has-class("full")]//img
title: //h1
content: //div[has-class("fullstory-meta-view")]

?exists: //div[@class="full"]

@remove: $body//div[has-class("top_new")]
@remove: $body//div[has-class("rss_fs")]
@remove: $body//div[has-class("bottom_new")]
@remove: $body//div[has-class("full_nextprev")]
telegram instant view template - Telegram — Instant View для любого сайта

Как вы уже догадались, два слеша вначале обязательны и обозначают начало элемента. Обратите внимание на переменную cover — это вложенный элемент (чилд) и ищется по принципу CSS (.full img{}. Следовательно, если вам нужно найти элемент вложенный несколько раз, то разделяйте чилды двойными слешами. В jquery это выглядело бы как-то так:

$('.full');
cover = $('.full img');

Обратите внимание на последнюю переменную exists над блоком с @remove. Она обязательна и будет указывать шаблонизатору, что данный шаблон использовать для всех ссылок.

Если все сделаете правильно, в правой части появится предпросмотр шаблона IV для вашего сайта. Справа вверху нажимаете на кнопку Track change и шаблон сохраняется в базе. Для отправки в Telegram нажимаете на ссылку рядом — View in Telegram

Откроется обработчик ссылок TG (по умолчанию ищет десктопную версию) и предложит выбрать канал для постинга. Пример уже опубликованного поста и повторная отправка

telegram instant view post default - Telegram — Instant View для любого сайта

Заметили два нюанса? Во-первых это API-ссылка, а во-вторых, опубликованный пост не очень красивый и публикует прямой адрес ссылки, а нам нужен текст! Решаемо!

Рендеринг через ControllerBot

Что это за штука описал в предыдущей статье: тут. Отправлять такие ссылки будем через него. Радует одно — у них есть общий связующий $_GET параметр и именно он определяет ваш шаблон!

https://t.me/iv?url=https%3A%2F%2Fdevarts.pro%2F737-telegram-controllerbot-dlya-renderinga-vashih-postov.html&rhash=2fb033e1643571

Выше наша постоянная ссылка с одним меняющимся значением — url. Меняем его, а в контроллере делаем следующее.

telegram instant view controllerbot - Telegram — Instant View для любого сайта
  • Форматирование HTML;
  • Оборачиваете вашу ссылку в HTML-ссылку и пишете нужный вам текст (красным);
  • Меняете зеленый адрес вашей статьи не зацепив авто замену слэшей (%2F);

Собственно и все. Вполне рабочий костыль. Один раз настроив шаблон, больше не требуется заходить на сайт IV. Отправка запроса на добавление вашего сайта в базу IV делается на сайте IV. Необходимо добавить минимальное количество страниц (оно ругнется числом) шаблонов и отправить запрос.

telegram instant view add website - Telegram — Instant View для любого сайта

Читайте также

Похожие записи

Прокси для Telegram — подбор, настройка и применение
В апреле 2018 года РКН (Служба по надзору в сфере связи, информационных технологий и массовых коммуникаций) начал первый этап блокировки...
Telegram — ControllerBot для рендеринга ваших постов
Пример на картинке выше — костыльный вариант Instant View и рендеринг (дополнительная обработка) ссылки через бота-редактора постов. Кстати, вынужденный пост,...
Telegram — форма заказа, отправка в чат с сайта, запись в txt и экспорт в Excel
Как подготовить telegram для приема данных! Безумная пасхальная ночка. Загорелся желанием доработать скрипт отправки данных в чат телеграма для заказа...
Telegram — регистрация и настройка бота
Переписываю старую статью дабы более полно отделить и структурировать информацию. В данной статье речь пойдет о создании своего собственного бота...
Telegram тестирует функцию звонков
Наконец-то и Telegram, который долгое время позиционировал себя, как текстовый мессенджер с функцией чат-ботов решился обзавестись встроенным телефоном. Telegram решил...

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *