Настраиваем кросспостинг из Вордпресс в Телеграм

9 апреля 2019 11

Рассказываю пошагово с картинками для начинающих и не очень, как сделать автоматический экспорт всех публикуемых постов из Вордпресс в Телеграм-канал, про нюансы, в том числе, как настроить и внедрить Instant View.

Телеграм — это не просто мессенджер вроде Ватсапа или Вайбера. Телеграм — это целая платформа с большими возможностями и огромным потенциалом.

Телеграм очень популярен в околоайтишной (и не только) среде. Особой популярностью пользуются каналы, боты, чаты. Не использовать Телеграм в качестве еще одного маркетингового канала, наверное, было бы странно.

У меня тоже есть свой канал в Телеграм: @danilin.biz. Не забудьте подписаться, кстати. Я им особо не занимаюсь, туда транслируется весь публикуемый на сайте контент. Причем, в более читабельном формате и без рекламы. Сегодня я покажу, как такая штука делается.

Для решения задачи нам понадобится установленный Вордпресс с плагином NextScripts: Social Networks Auto-Poster и, конечно, сам Телеграм с активной учетной записью.

Весь процесс условно можно разбить на 10 этапов, половина из которых опциональные — их можно не делать.

Начнем с Телеги.

Можно воспользоваться веб-версией, мобильной или десктопной версией — без разницы. Все примеры я буду проводить на Telegram 5.1 для Мак-ос.

Создаем бота

Открываем Телеграм, в глобальном поиске находим бота с именем BotFather и начинаем с ним «беседу».

Запуск бота BotFather
Запуск бота BotFather

После запуска, на экране отобразится весь список доступных команд.

Пишем ему:

/newbot

BotFather попросит придумать новому боту название и юзернейм. Обратите внимание, юзернейм должен оканчиваться на «bot».

В качестве примера я создал бота «Danilin.biz Test Bot» и дал ему имя danilinbiztest_bot.

А весь диалог с BotFather выглядел так.

Ivan Danilin, [8 апр. 2019 г., 17:01:21]: 
/newbot

BotFather, [8 апр. 2019 г., 17:01:21]: 
Alright, a new bot. How are we going to call it? Please choose a name for your bot.

Ivan Danilin, [8 апр. 2019 г., 17:01:41]: 
Danilin.biz Test Bot

BotFather, [8 апр. 2019 г., 17:01:41]:
Good. Now let's choose a username for your bot. It must end in bot. Like this, for example: TetrisBot or tetris_bot.

Ivan Danilin, [8 апр. 2019 г., 17:02:21]:
danilinbiztest_bot

BotFather, [8 апр. 2019 г., 17:02:49]:
Done! Congratulations on your new bot. You will find it at t.me/danilinbiztest_bot. You can now add a description, about section and profile picture for your bot, see /help for a list of commands. By the way, when you've finished creating your cool bot, ping our Bot Support if you want a better username for it. Just make sure the bot is fully operational before you do this.

Use this token to access the HTTP API:
7095##########Ch0jGnKOzb1qFor3YNx03oeMzKR_s

Keep your token secure and store it safely, it can be used by anyone to control your bot.

For a description of the Bot API, see this page: https://core.telegram.org/bots/api

BotFather дал нам токен для доступа к Telegram API. Сохраняем его, запоминаем имя созданного бота. Все это нам понадобится на следующих этапах.

Создаем канал

Открываем Телеграм и обычным способом создаем канал.

Создание канала в Телеграм
Создание канала в Телеграм

Назовем его «Тестовый канал Danilin.biz»

Название канала в Телеграм
Название канала в Телеграм

Там все предельно просто. Указываем тип канал: публичный или частный. Публичный можно найти через поиск, частный — нет. Придумываем адрес канала и запоминаем его.

Например, адрес моего канала: @danilinbiz, ссылка на него выглядит так: t.me/danilinbiz

Назначаем нашего бота админом канала

Того самого, которого создали на первом этапе. Для этого открываем канал и идем в раздел «Информация».

Информация о канале Телеграм
Информация о канале Телеграм

Переходим в раздел «Администраторы канала» ⟶ «Добавить администратора» и ищем в глобальном поиске своего ранее созданного бота.

Поиск бота в глобальном поиске Телеграм
Поиск бота в глобальном поиске Телеграм

Назначаем бота администратором и переходим к настройке Вордпресс.

Устанавливаем и настраиваем плагин NextScripts: Social Networks Auto-Poster

Плагин сокращенно называют SNAP. Найти его можно в официальном репозитории Вордпресс или скачать по ссылке.

Почему именно SNAP

Потому что кроме Телеги, SNAP умеет кросспостить в другие блоги на Вордпресс, в популярные соцсети: Фейсбук, Инстаграм, Ютуб, Вконтакте, Твиттер, Одноклассники, ЖЖ, а также и в менее популярные: 500Px, Blogger, deviantART, Diigo, Flickr, Flipboard, Google My Business, Google+, Instapaper, LinkedIn, Line, MailChimp, Medium, Plurk, Pinterest, Reddit, Scoop.It, SETT, Tumblr, vBulletin, Weibo, XING, Yo.

Список выглядит убедительно.

Я несколько лет пользуюсь SNAP на разных проектах. В целом плагин зарекомендовал себя положительно. Бесплатной версии вполне достаточно для решения повседневных задач.

Приступаем к настройке

Добавляем новый аккаунт. В выпадающем списке выбираем Телеграм, копируем полученный токен бота и указываем ID канала. Не забудьте про собаку.

Добавление нового аккаунта в SNAP
Добавление нового аккаунта в SNAP

SNAP по умолчанию публикует посты в формате Заголовок — Ссылка на запись. Формат можно настроить, для этого есть куча заготовленных тегов.

%TITLE%Заголовок записи
%URL%Ссылка на запись
%SURL%Короткая ссылка на запись
%IMG%Ссылку на миниатюру записи
%EXCERPT%Преобразованный анонс записи
%RAWEXCERPT%Непреобразованный анонс записи
%ANNOUNCE%Текст до тега или первые N слов записи
%FULLTEXT%
Преобразованный текст записи
%RAWTEXT%Непреобразованный тест записи
%TAGS%Метки записи
%CATS%Рубрики записи
%HTAGS%Метки записи в виде хэштегов
%HCATS%Рубрики записи в виде хэштегов
%AUTHORNAME%Имя автора
%SITENAME%Название сайта

Тестируем кросспостинг

После всех процедур, рекомендую проверить связку на работоспособность. Для этого открываем настройки аккаунта в SNAP и нажимаем кнопку «Отправить тестовую запись в Телеграм».

Отправить тестовую запись в Телеграм
Отправить тестовую запись в Телеграм

Если все сделано правильно, в созданном канале опубликуется пост примерно такого содержания.

Тестовый пост
Тестовый пост

Задача решена и на этом можно остановиться.
Теперь все новые посты из Вордпресс будут транслироваться в Телегу.

Остальное — опционально.

Настраиваем прокси

В некоторых странах бывают проблемы с доступом к Telegram API. Если ваш хостер оказался проблемным, тогда идем в расширенные настройки аккаунта SNAP и настраиваем прокси.

Там все просто, задаем:

  • IP-адрес : Порт
  • Имя пользователя : Пароль

Настраиваем фильтрацию

Иногда транслировать в Телеграм нужно не все подряд. Для этого можно настроить фильтрацию. Например, разрешить кросспостинг только для каких-то конкретных рубрик, меток или авторов.

Фильтры SNAP
Фильтры SNAP

Если этого мало, PRO версия плагина позволяет пойти дальше и фильтровать посты по произвольным полям, таксономиям и даже поиску.

Индивидуальные настройки кросспостинга

Как я уже говорил, в SNAP задается дефолтный формат транслируемых постов. Также имеется возможность задавать индивидуальный шаблон или текст для каждого поста. В редакторе для этого есть такой блок.

Настройка кросспостинга перед публикацией
Настройка кросспостинга перед публикацией

На этом еще раз можно поставить точку, а можно пойти ещё дальше и подключить к сайту Telegram Instant View.

Настраиваем Telegram Instant View

Telegram Instant View — мгновенный просмотр страниц внутри Телеграм, без перехода на сайт. По похожему принципу работают Google AMP, Facebook Instant Articles, Турбо-страницы Яндекса. Страницы открываются внутри интерфейса веб-приложений.

В Телеграме страницы с Instant View помечаются вот такой кнопкой с молнией.

Пример Telegram Instant View
Пример Telegram Instant View

А сами публикации выглядят таким образом.

Пример статьи в Telegram Instant View
Пример статьи в Telegram Instant View

Чтобы сделать такую штуку, нужно в Telegram Instant View создать шаблон, по которому Телеграм сможет прочесть и разобрать вашу публикацию.

Для этого идем на сайт, авторизуемся, переходим в раздел My Templates и создаем новый шаблон. Я покажу рабочий пример со своего сайта и расскажу каким образом происходит разбор страницы.

Настройка правил в Telegram Instant View

Картинка кликабельна.

Все мои правила состоят из семи строк.

body: //article
title: //h1
author: //div[@class="author"]//span
@remove: //div[@class="meta"]
@remove: //section[@class="gab gab-intro"]
cover: // div[@class="post-thumbnail"]//img
@remove: //iframe
  1. Определяем тег или класс тела поста. Просто открываем Chrome DevTools и смотрим где начинается и заканчивается статья. У меня это тег ARTICLE
  2. Заголовок в H1
  3. Автор находится в теге SPAN, который находится внутри DIV с классом «author»
  4. Удаляем содержимое в блоке с классом «meta» — там метаданные, которые нам не понадобятся
  5. Удаляем также содержимое «gab gab-inro» — там баннер, который я тоже не хочу транслировать в Телеграм
  6. Задаем обложку поста, просто берем изображение из тега IMG, находящегося в блоке с классом «post-thumbnail».
  7. Удаляем все фреймы, что делать совсем необязательно

Сохраняем шаблон, проверяем его на десяти страницах своего сайта.
Если ошибок нет — идем дальше.

Связываем SNAP и Telegram Instant View

Вариантов, как это сделать много. Я покажу, наверное, самый простой, которым пользуюсь сам.

Копируем ссылку с кнопки VIEW IN TELEGRAM.

View in Telegram
View in Telegram

Ссылка выглядит таким образом:

https://t.me/iv?url=https%3A%2F%2Fdanilin.biz%2F20-blogging-wordpress-themes.htm&rhash=d5941748e433eb

Как видим, у нее имеется такое начало:

https://t.me/iv?url=

И такой хвост:

&rhash=d5941748e433eb

Значение rhash у вас будет другим, разумеется.

По этому принципу нам нужно создать формат ссылки в настройках SNAP.

Настройка Telegram Instant View в SNAP
Настройка Telegram Instant View в SNAP

В моем примере в Телеграм транслируется анонс %ANNOUNCE% и ссылка на Instant View в таком формате:

https://t.me/iv?url=%URL%&rhash=d5941748e433eb

В таком формате в Телеграм будет уходить анонс публикации со ссылкой на Instant View.

На этом все — вопрос по кросспостингу из Вордпресс в Телеграм считаю закрытым. Все примеры рабочие, взяты с боевых сайтов.

Все вопросы, замечания, пожалуйста, пишите в комментариях.

Иван Данилин

Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, поддержкой, делюсь опытом в блоге

Комментарии
  1. Здравствуйте! Спасибо Вам за статью ! Можете мне помочь ? Не могу установить класс отвечающий за изображение в статье.
    _http://primer44.tk/ezhenedelnyj-otchet-tron-dapp-cifry-dapp-prodolzhat-rasti-tak-kak-eos-et-ne-dognat/
    (перепробывал все классы single-featured, post-thumbnail open-lightbox, post-thumbnail, has-thumbnail ) Спасибо


    • Похоже, что вы пишете класс ссылки, а нужно изображения (IMG)
      Попробуйте так: cover: // a[@class="post-thumbnail"]//img
  2. Здравствуйте. Делаю по вашей инструкции и в тестовом посте выдаёт ошибку [body] => {«ok»:false,»error_code»:400,»description»:»Bad Request: chat not found»}, с чем это может быть связано?
  3. Приветствую! Классный мануал, все понятно. Единственное, на этапе создания мгновенного просмотра выдает ошибку (при генерации шалона) Version 1.0 is outdated. Please update your template to the last version 2.1
    Где поменять версия не могу найти.
    Подскажи, плиз)
    • Сергей, привет!
      У второй версии отличается синтаксис
      У меня вот такой примерно шаблон IV
      Telegram Instant View Version 2
  4. Добрый день!! Подскажите как вы сделали всплывающее окно »
    Приветствую!
    Подпишитесь на мой фейсбук, там тоже много полезного.» Буду очень благодарен за ответ
    • Это плагин Popup Maker — пожалуй, лучший плагин в своем классе
  5. Здравствуйте. Уточните, правильно понимаю, что можно настроить автоматическую публикацию в канал с сайта после создания записи в таком формате только:
    Заголовок %TITLE%
    Анонс %EXCERPT%
    Ссылку на статью на записи %URL%

    А основной текст записи можно исключить?
    • Добрый день! «SNAP по умолчанию публикует посты в формате Заголовок — Ссылка на запись. Формат можно настроить, для этого есть куча заготовленных тегов.»
  6. Вот не могу найти решение транслировать комментарии с wordpress в телеграм чтобы было красиво, есть IFFT, но он всё форматирование портит. Может знаете какое решение?
    • У меня нет, к сожалению
Добавить комментарий