Все на скриншоте пример статьи с данного сайта, опубликованной в 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. На базе будущего шаблона будут генерироваться все следующие ссылки-шаблоны.
В качестве примера можете использовать мою ссылку (см. выше)
Мы попадаем в панель редактора шаблонов. В правом окне у вас гарантированно ничего не будет. Смысл следующий:
- Указать 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")]
Как вы уже догадались, два слеша вначале обязательны и обозначают начало элемента. Обратите внимание на переменную cover — это вложенный элемент (чилд) и ищется по принципу CSS (.full img{}. Следовательно, если вам нужно найти элемент вложенный несколько раз, то разделяйте чилды двойными слешами. В jquery это выглядело бы как-то так:
$('.full');
cover = $('.full img');Обратите внимание на последнюю переменную exists над блоком с @remove. Она обязательна и будет указывать шаблонизатору, что данный шаблон использовать для всех ссылок.
Если все сделаете правильно, в правой части появится предпросмотр шаблона IV для вашего сайта. Справа вверху нажимаете на кнопку Track change и шаблон сохраняется в базе. Для отправки в Telegram нажимаете на ссылку рядом — View in Telegram
Откроется обработчик ссылок TG (по умолчанию ищет десктопную версию) и предложит выбрать канал для постинга. Пример уже опубликованного поста и повторная отправка
Заметили два нюанса? Во-первых это API-ссылка, а во-вторых, опубликованный пост не очень красивый и публикует прямой адрес ссылки, а нам нужен текст! Решаемо!
Рендеринг через ControllerBot
Что это за штука описал в предыдущей статье: тут. Отправлять такие ссылки будем через него. Радует одно — у них есть общий связующий $_GET параметр и именно он определяет ваш шаблон!
https://t.me/iv?url=https%3A%2F%2Fdevarts.pro%2F737-telegram-controllerbot-dlya-renderinga-vashih-postov.html&rhash=2fb033e1643571
Выше наша постоянная ссылка с одним меняющимся значением — url. Меняем его, а в контроллере делаем следующее.
- Форматирование HTML;
- Оборачиваете вашу ссылку в HTML-ссылку и пишете нужный вам текст (красным);
- Меняете зеленый адрес вашей статьи не зацепив авто замену слэшей (%2F);
Собственно и все. Вполне рабочий костыль. Один раз настроив шаблон, больше не требуется заходить на сайт IV. Отправка запроса на добавление вашего сайта в базу IV делается на сайте IV. Необходимо добавить минимальное количество страниц (оно ругнется числом) шаблонов и отправить запрос.
Комментарии