Instant View Telegram в Wordpress
New Post has been published on https://poltavcev.biz/blog/2018/06/05/instant-view-telegram-v-wordpress/
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”. Нажимаем и ждем публикации. Также, можете добавить ссылку на любую статью с вашего сайта на этой странице: https://instantview.telegram.org/contest нажав на кнопку “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. Вот формат сообщения, который я использую для себя:
#InstantView, #SnapAutoposter, #Telegram <a href="https://t.me/iv?url=https://poltavcev.biz/blog/2018/06/05/instant-view-telegram-v-wordpress/&rhash=731cd3d47acb43">.</a>
На сегодня все ) Обязательно задавайте свои вопросы в комментариях и подписывайтесь на мой канал в telegram >>
