Instant View для Telegram в WordPress

Всем привет. Сегодня расскажу, как я сделал Instant View для своих постов с WordPress в telegram и настроил автоматический постинг сообщений в нужные каналы сразу после публикации статьи на блоге. Я давненько задавался этим вопросом, но все никак не доходили руки. А тут выдался свободный денек – сел, за пару часов разобрался и реализовал. Данное решение будет работать не только на WordPress — любой сайт можно настроить данным способом.

Сразу делаю оговорку, что для автоматического размещения постов в социальные сети, в том числе telegram-каналы — использую плагин NextScripts: Social Networks Auto-Poster. Это сильно упрощает задачу по репосту и планированию постинга в социальных сетях. Рекомендую.

Давайте вернемся к Instant View. В первую очередь — что же такое Instant View? Это технология быстрого просмотра статьи прямо в telegram. Подобные страницы избавлены от лишнего контента и кешируются самим телеграмом, поэтому открываются прямо на лету – что очень удобно как для глаз так и с точки зрения пользовательского опыта. Характерны такие посты синей кнопкой с молнией:

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

1. Вход в центр управления шаблонами Instant View. Переходим на сайт https://instantview.telegram.org и справа видим ссылку “My templates”, по клику на нее входим через свой telegram-аккаунт. На открывшейся странице вводим адрес статьи на Вашем блоге, на примере которой хотите создать свой Instant View. Рекомендую выбирать статью, в которой есть максимальное количество элементов ,которые можете использовать: картинки, видео, аудиофайлы и т.д.:

Нажимаем Enter и видим три окна – статья как она выглядит в браузере, правила для обработки Instant View и предварительный просмотр готового Instant View.

2. Поиск нужных тегов в статье. Далее, начинается самое сложное для неискушенного пользователя. Но не волнуйтесь – если у Вас не будет получаться – в комментариях оставляйте свои ссылки на статьи, помогу создать нужный код. Итак, открываем предпросмотр кода в браузере (меню левой кнопки мыши) и находим теги, которые отвечают за вывод статьи. Для примера у меня это <article class="article-post">

Чтобы понять какой у вас тег отвечает за вывод статьи – наводите и открывайте гармошку кода до тех пор, пока не найдете нужный. Таким же образом находим теги для заголовка статьи, картинки, описания, автора, даты публикации, подзаголовка. Для примера, вот мои теги:

Заголовок статьи – <h1 class="posttitle">

Дата публикации – <time class="post-date">

Подзаголовок (у меня это количество времени на прочтение статьи) – <span class="readingtime">

Картинка поста – <img  class="featured-image img-fluid wp-post-image">

Тело статьи – <article class="article-post">

Автор статьи – <a class="text-capitalize link-dark">

Можете открыть код этой статьи и изучить его, чтобы понимали о чем речь.

3. Написание кода обработки Instant View. Подробная документация находится здесь (на английском): https://instantview.telegram.org/docs
   • Первым делом выводим картинку поста кодом: cover: //img[has-class("featured-image img-fluid wp-post-image")] в данном куске кода видим, что присутствует тег img и его класс featured-image img-fluid wp-post-image – именно таким образом у меня выводится картинка.
   • Следующая строка – заголовок: title: //h1[has-class("posttitle")] Опять видим тег h1 и его класс posttitle – смотрите выше, у меня на блоге таким блоком выводится заголовок. И так далее..
   • Подзаголовок: subtitle: //span[has-class("readingtime")]
   • Автор статьи: author: //a[has-class("text-capitalize link-dark")]. Если оставить код в таком виде, то после имени автора зацепает и слово “Follow”. Чтобы убрать любой кусок страницы с нашего Instant View используем функцию remove: @remove: //span[has-class("btn follow")]
   • Делаем автора статьи кликабельным (можно добавить любой адрес): author_url: "https://poltavcev.biz"
   • Дата публикации статьи: published_date: //time[has-class("post-date")]
   • И, наконец, сама статья: body: //article[has-class("article-post")]
4. Проверка как выглядит в telegram. Теперь можно нажать вверху справа на ссылку “Mark as checked” и после этого отправить в телеграм ссылкой “View in Telegram“. Если Вы подобрали правильно теги и классы, то все должно работать.
5. Добавляем ссылку на канал. Чтобы под изображением или в шапке появилась ссылка на ваш телеграм-канал – необходимо прописать тег channel в котором указать логин  нужного канала: channel: "@poltavcev"
6. Ограничиваем папку статей. Чтобы Instant View генерировался только для постов – добавляем папку/слуг по которому находятся Ваши посты через функцию path: ?path: /blog/.*  Если в WordPress у Вас не задан подобный слуг, сделать это можно задав произвольную маску в настройках постоянных ссылок:
7. Публикация шаблона. После того, как шаблон готов и протестирован – необходимо отправить его на публикацию. Только после проверки все ваши ссылки будут автоматически подхватываться telegram и на основании шаблона генерироваться Instant View. Для отправки на публикацию – добавьте несколько страниц со своего блога —  на сегодняшний день это 10. После того, как необходимое количество ссылок будет добавлено, на данной странице станет активна ссылка “Submit template”. Нажимаем и ждем публикации. Также, можете добавить ссылку на любую статью с вашего сайта: здесь >>> нажав на кнопку “Add domain”

Вот полный пример обработчика для моего блога:

cover: //img[has-class("featured-image img-fluid wp-post-image")]
title: //h1[has-class("posttitle")]
subtitle: //span[has-class("readingtime")]
author: //a[has-class("text-capitalize link-dark")]
author_url: "https://poltavcev.biz"
@remove: //span[has-class("btn follow")]
published_date: //time[has-class("post-date")]
body: //article[has-class("article-post")]
?path: /blog/.*
channel: "@poltavcev"

8. Как использовать пока не опубликовали шаблон. Пока я не знаю насколько быстро публикуют шаблоны и вообще публикуют ли… По результату модерации – отпишусь здесь. Но есть возможность, вполне легально, использовать данный шаблон без одобрения (данная возможность описана в документации telegram). При нажатии на “View in Telegram” Вы получаете специальную ссылку, которая без перекодировки выглядит так: https://t.me/iv?url=ССЫЛКА НА ВАШУ СТАТЬЮ&rhash=УНИКАЛЬНЫЙ ХЕШ ШАБЛОНА. Можно подставить данную ссылку боту @ControllerBot и спрятать некрасивую ссылку за точкой.  Но я выбрал отправку на полном автомате через NextScripts: Social Networks Auto-Poster. Вот формат сообщения, который я использую для себя: 

%TITLE%
%HTAGS%
%HCATS%
%EXCERPT%
<a href="https://t.me/iv?url=%URL%&rhash=731cd3d47acb43">.</a>

На сегодня все ) Обязательно задавайте свои вопросы в комментариях и подписывайтесь на мой канал в telegram >>