Instant View для Telegram в Wordpress

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

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

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

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

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

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

• Поиск нужных тегов в статье. Далее, начинается самое сложное для неискушенного пользователя. Но не волнуйтесь - если у Вас не будет получаться - в комментариях оставляйте свои ссылки на статьи, помогу создать нужный код. Итак, открываем предпросмотр кода в браузере (меню левой кнопки мыши) и находим теги, которые отвечают за вывод статьи. Для примера у меня это <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">

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

• **Написание кода обработки 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")]

• **Проверка как выглядит в telegram. **Теперь можно нажать вверху справа на ссылку “Mark as checked” и после этого отправить в телеграм ссылкой “View in Telegram”. Если Вы подобрали правильно теги и классы, то все должно работать.

• Добавляем ссылку на канал. Чтобы под изображением или в шапке появилась ссылка на ваш телеграм-канал - необходимо прописать тег channel в котором указать логин  нужного канала: channel: "@poltavcev"

• **Ограничиваем папку статей. **Чтобы Instant View генерировался только для постов - добавляем папку/слуг по которому находятся Ваши посты через функцию path: ?path: /blog/.*  Если в Wordpress у Вас не задан подобный слуг, сделать это можно задав произвольную маску в настройках постоянных ссылок:

• **Публикация шаблона. **После того, как шаблон готов и протестирован - необходимо отправить его на публикацию. Только после проверки все ваши ссылки будут автоматически подхватываться 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"

• **Как использовать пока не опубликовали шаблон. **Пока я не знаю насколько быстро публикуют шаблоны и вообще публикуют ли… По результату модерации - отпишусь здесь. Но есть возможность, вполне легально, использовать данный шаблон без одобрения (данная возможность описана в документации 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 >>