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

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


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

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

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

1. Шаблон Instant View



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

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

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

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 для любого сайта

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

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

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

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

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

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 для любого сайта


— форматирование HTML
— оборачиваете вашу ссылку в HTML-ссылку и пишете нужный вам текст (красным)
— меняете зеленый адрес вашей статьи не зацепив авто замену слешей (%2F)


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

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


Понравилась статья "Telegram — Instant View для любого сайта" из раздела Веб разработка » Telegram? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 1054   Дата: 29-дек-2017, 12:41

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика