Микола Полтавцев Пишу про технічний бік онлайн-бізнесу, особисту та командну ефективність, нову економіку.

Instant View для Telegram в WordPress

55 sec read 8110

Всем привет. Сегодня расскажу, как я сделал 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.

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

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

  1. Написание кода обработки 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")]
  2. Проверка как выглядит в telegram. Теперь можно нажать вверху справа на ссылку “Mark as checked” и после этого отправить в телеграм ссылкой “View in Telegram“. Если Вы подобрали правильно теги и классы, то все должно работать.
  3. Добавляем ссылку на канал. Чтобы под изображением или в шапке появилась ссылка на ваш телеграм-канал – необходимо прописать тег channel в котором указать логин  нужного канала: channel: "@poltavcev"
  4. Ограничиваем папку статей. Чтобы Instant View генерировался только для постов – добавляем папку/слуг по которому находятся Ваши посты через функцию path: ?path: /blog/.*  Если в WordPress у Вас не задан подобный слуг, сделать это можно задав произвольную маску в настройках постоянных ссылок:
  5. Публикация шаблона. После того, как шаблон готов и протестирован – необходимо отправить его на публикацию. Только после проверки все ваши ссылки будут автоматически подхватываться 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"

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

Микола Полтавцев Пишу про технічний бік онлайн-бізнесу, особисту та командну ефективність, нову економіку.

16 Replies to “Instant View для Telegram в WordPress”

  1. Николай приветствую! Не могу разобраться с кодом…

    1. Александр, очень мало информации чтобы помочь Вам ) Уточните на каком этапе возникает проблема.

    1. Добрый день, Илья. Для какого сайта нужно создать код? Для telegra.ph? Это проект самого телеграма, поэтому он по умолчанию поддерживает Instant View. Если для другого сайта – дайте ссылку на него.

  2. Здравствуйте, пытаюсь играться с сылками и научиться пользоваться instant view. В пример использую бесплатную версию wordpress. Хочу разобраться в коде и узнать – что же мне нужно встравить в rules instant view – что бы все конкретно отображалось. Вот ссылка: https://mikeart1blog.wordpress.com/2018/10/07/время-покажет/

    1. Mike, приветствую. У Вас такая-же проблема как и у Ильи. WordPress.com уже, по умолчанию, поддерживает Instant View. Поэтому, на нем особо не научитесь….

  3. Здравствуйте. Вы указали что можна ссылку на автора статьи прописывать
    author_url: “https:/нужный_урл”

    но как прописать код чтобы урл вытягивало автоматически с блока? так как авторов может быть несколько. имя автора подтягивает автоматически ж

    1. Владимир, прошу прощения, что так долго отвечаю. Много сейчас работы навалилось. Так что пока некогда посмотреть решение вашего вопроса. Но проблем не должно возникнуть. Если поможет “описательный” ответ, то вот как это должно делаться:
      На ваших страницах должен быть вшит адрес каждого из авторов. Нужно просто извлечь этот адрес и вставить в author_url. Но, думаю, что вы сами это понимаете…
      Пробовал быстро пролететь по справке, не нашел готового решения…
      Так что или ждать пока у меня время освободится или кто-то другой ответ подскажет.

      1. да адрес есть, но дело в том, что не хочеться его в ручную пробивать. потому что сегодня автор один – и адрес у него свой, а завтра автор другой, и у него тоже адрес другой. Мне именно надо сделать так, чтобы адрес автоматически подхвачивало под каждого автора. так как автора меняет автоматически.
        Например
        статья 1 (автор 1)
        author: //a[has-class(“text-capitalize link-dark”)] – подхватит автора 1 из блока
        author_url: “www.site/autor1” – переход на страницу автора 1

        статья 2 (автор 2)
        author: //a[has-class(“text-capitalize link-dark”)] – подхватит автора 2 из блока
        author_url: “www.site/autor1” – переход на страницу автора 1

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

        например
        если author: //a[has-class(“text-capitalize link-dark”)] – автор1 то author_url: “www.site/autor1”
        если author: //a[has-class(“text-capitalize link-dark”)] – автор2 то author_url: “www.site/autor2”

        ну или автоматически подставка author_url из блока
        спасибо

        1. Владимир, все верно. Я понимаю о чём вы. Там проверка не нужна. Скорее всего можно выхватывать просто с определенного блока нужный линк и его подставлять вместо author_url. Но, опять же, быстрый поиск по справке не показал ничего похожего. Нужно чуть глубже копнуть.

  4. Добрый день.

    Спасибо огромное. Все у меня получилось 😉 Прям все в авторежиме работает.

    Но, как всегда хочется немного больше 😉

    Хотел спросить вас, а возможно ли, чтобы после сообщения в телеграм шли кнопки с реакциями (пусть даже указанными? Или это уже за гранью возможного?

    1. Анатолий, добрый день.
      Рад что все получилось.
      На автомате не знаю чтобы можно было кнопки выводить.
      Я через likebot делаю: @like

    1. Добрый день, Влад. Прошу прощения, очень занят, к сожалению. Не смогу помочь…

  5. Николай, Здравствуйте! Не получается сделать. https://7kun.kz/qazaqstanda-eksporttalatyn-tauarlar-bagasy-13-8-artty/

    Написал самое необходимое:
    cover: //img[has-class(“td-modal-image”)]
    title: //h1[has-class(“td-post-title”)]
    author: //a[has-class(“td-post-author-name”)]
    author_url: “https://7kun.kz”
    published_date: //time[has-class(“entry-date updated td-module-date”)]
    body: //article[has-class(“td-post-content p”)]

    1. Дадите ссылку на предпросмотр?

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

logo Не пропускай нові статті, отримуй оновлення на пошту