Автопубликация статей в Telegram-канале с поддержкой Instant View
от aNNiMON
На нашем сайте уже давно используется автопубликация статей и прочей полезной информации в Telegram-канал. Хочу рассказать, как это сделано, а заодно и поведаю, как добавить поддержку Instant View, потому что автоматически она доступна только для популярных сайтов, для которых в Telegram написаны парсеры.
Для начала вкратце расскажу, как публикуется сообщение в канал. Допустим, на сайте произошло какое-то событие — добавлена новая статья. Мы должны отправить запрос к Telegram API, где указать содержимое нового сообщения, например "Дорогие друзья, на нашем сайте опубликована новая статья: <ссылка>". Это сообщение публикует бот, которого мы предварительно создали и добавили в канал в качестве администратора. Вот и вся магия. Теперь по порядку.
Шаг 1. Создание бота
Бота создаём при помощи @BotFather. Отправляем ему команду /newbot, затем имя и логин. В ответ получим информацию с токеном. Кто запутается, можете посмотреть видео https://youtu.be/jwzeBzfBvOo?t=19. У меня создание бота заняло 26 секунд с 19 по 45 секунду.
Шаг 2. Добавление бота в администраторы канала
Идём в Manage Channels -> Administrators -> Add administrator, ищем там своего бота и добавляем в канал как администратора.
Шаг 3. Обращение к Telegram Bot API
Здесь достаточно отправить GET-запрос с нужными параметрами, а именно: токен бота, идентификатор канала или группы, а также текст сообщения.
Осталось только вызвать функцию при нужном событии на сайте:
Кстати, если у вас приватный канал, то chatId по имени не получить, в таком случае придётся один раз обратиться к боту через метод getUpdates: https://toster.ru/q/244962
Шаг 4. Добавляем парсер Instant View
Заходим на сайт https://instantview.telegram.org/, логинимся и жмём My Templates. Вводим ссылку на существующую статью на вашем сайте и жмём Enter. Попадаем в редактор.
Дальше нужно при помощи XPath получить со страницы необходимую информацию.
Можете посмотреть примеры в Sample Templates, они там с комментариями, или вот мой:
Для удобства обращения к часто используемым блокам, их можно сохранить в переменную (знак доллара необязателен, но с ним понятнее):
Наша задача заполнить переменные:
- title - заголовок
- subtitle - подзаголовок (если есть)
- author - имя автора
- author_url - ссылка на профиль автора
- published_date - дата публикации
- body - содержимое статьи
Также по возможности нужно убрать лишнее специальной конструкцией $remove. Например, убрать спойлеры, оставив само их содержимое:
Можно заменять теги. Вывод кодов у нас сделан с номером строк, поэтому их можно убрать и сам код обернуть в <pre><code>:
Как только всё будет готово, жмите вверху View in Telegram. Получится ссылка вот такого вида: https://t.me/iv?url=https%3A%2...rhash=8d520542820502
Теперь, чтобы Instant View был доступен, достаточно отправить сообщение с новой ссылкой:
Instant View справляется отлично. Показывает ролики с YouTube, обычные видео, даже музыку проигрывает.
Посмотреть результат в действии можно на нашем канале https://t.me/annimon_com
Помните, что Instant View поддерживается лишь на мобильных устройствах.
Для начала вкратце расскажу, как публикуется сообщение в канал. Допустим, на сайте произошло какое-то событие — добавлена новая статья. Мы должны отправить запрос к Telegram API, где указать содержимое нового сообщения, например "Дорогие друзья, на нашем сайте опубликована новая статья: <ссылка>". Это сообщение публикует бот, которого мы предварительно создали и добавили в канал в качестве администратора. Вот и вся магия. Теперь по порядку.
Шаг 1. Создание бота
Бота создаём при помощи @BotFather. Отправляем ему команду /newbot, затем имя и логин. В ответ получим информацию с токеном. Кто запутается, можете посмотреть видео https://youtu.be/jwzeBzfBvOo?t=19. У меня создание бота заняло 26 секунд с 19 по 45 секунду.
Шаг 2. Добавление бота в администраторы канала
Идём в Manage Channels -> Administrators -> Add administrator, ищем там своего бота и добавляем в канал как администратора.
Шаг 3. Обращение к Telegram Bot API
Здесь достаточно отправить GET-запрос с нужными параметрами, а именно: токен бота, идентификатор канала или группы, а также текст сообщения.
- public static function telegramSendMessage($botToken, $text, $chatId = '@annimon_com') {
- $url = 'https://api.telegram.org/bot' . $botToken
- . '/sendMessage?chat_id=' . $chatId
- . '&text=' . urlencode($text);
- $ch = curl_init();
- curl_setopt_array($ch, [
- CURLOPT_URL => $url,
- CURLOPT_SSL_VERIFYHOST => false,
- CURLOPT_SSL_VERIFYPEER => false,
- CURLOPT_RETURNTRANSFER => true
- ]);
- $result = curl_exec($ch);
- curl_close($ch);
- return $result;
- }
- telegramSendMessage($telegramBotToken, 'Опубликована статья: https://annimon.com/article/' . $id, '@annimon_com');
Кстати, если у вас приватный канал, то chatId по имени не получить, в таком случае придётся один раз обратиться к боту через метод getUpdates: https://toster.ru/q/244962
Шаг 4. Добавляем парсер Instant View
Заходим на сайт https://instantview.telegram.org/, логинимся и жмём My Templates. Вводим ссылку на существующую статью на вашем сайте и жмём Enter. Попадаем в редактор.
Дальше нужно при помощи XPath получить со страницы необходимую информацию.
Можете посмотреть примеры в Sample Templates, они там с комментариями, или вот мой:
- # Parse all pages except the root page
- ?path: /.+
- $header: //header
- $body: //*[@id="content"]
- $title: $header//h1
- $author: //a[@rel="author"]
- $author_url: $author/@href
- $published_date: //meta[@property="article:published_time"]/@content
- # code
- $code: //div[@class="backcode"]
- @remove: $code/div/div
- <code>: $code/div/ol
- <pre>: $code/div
- # spoiler
- @remove: //div[@class="tops"]/..
- @remove: //div[@class="tops2"]/..
Для удобства обращения к часто используемым блокам, их можно сохранить в переменную (знак доллара необязателен, но с ним понятнее):
- $header: //header
- $code: //div[@class="backcode"]
Наша задача заполнить переменные:
- title - заголовок
- subtitle - подзаголовок (если есть)
- author - имя автора
- author_url - ссылка на профиль автора
- published_date - дата публикации
- body - содержимое статьи
Также по возможности нужно убрать лишнее специальной конструкцией $remove. Например, убрать спойлеры, оставив само их содержимое:
- @remove: //div[@class="tops"]/..
- @remove: //div[@class="tops2"]/..
Можно заменять теги. Вывод кодов у нас сделан с номером строк, поэтому их можно убрать и сам код обернуть в <pre><code>:
- $code: //div[@class="backcode"]
- @remove: $code/div/div
- <code>: $code/div/ol
- <pre>: $code/div
Как только всё будет готово, жмите вверху View in Telegram. Получится ссылка вот такого вида: https://t.me/iv?url=https%3A%2...rhash=8d520542820502
Теперь, чтобы Instant View был доступен, достаточно отправить сообщение с новой ссылкой:
- telegramSendMessage($telegramBotToken, 'Опубликована статья: https://t.me/iv?url=' . urlencode('https://annimon.com/article/' . $id) . '&rhash=8d520542820502');
Instant View справляется отлично. Показывает ролики с YouTube, обычные видео, даже музыку проигрывает.
Посмотреть результат в действии можно на нашем канале https://t.me/annimon_com
Помните, что Instant View поддерживается лишь на мобильных устройствах.
