Как добавить комментарии Telegram на WordPress сайт

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

Коротко о Discussion Widget

За основу берем стандартный Telegram Discussion Widget.

Для встраивания сообщения вместе со всеми обсуждениями вам понадобится только ссылка на сообщение с комментариями/

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

В этом случае вам понадобится только ссылка на канал. Обсуждения будут доступны на вашем сайте, как только вы опубликуете ссылку в вашем канале/группе.

Этот вариант мы и рассмотрим.

Как добавить виджет на сайт

Добавляем метатег telegram:channel, он не обязательный, но необходим как заголовок вашего канала при просмотре поста через Instant View. Вписываем туда название вашего канала:

<meta property="telegram:channel" content="@wordpress_digest" />

Внимательно проверяем, чтобы на странице в обязательном порядке присутствовал метатег rel:canonical и чтобы ссылка в нём в точности соответствовала ссылке, котрую вы будете публиковать в вашу группу в Telegram:

<link rel="canonical" href="https://wp-digest.com/news/soobshhestvo-wordpress-russia-v-telegram/" />

Настраиваем Discussion Widget (задаём название вашего канала, цвета, размеры и количество комментариев) на странице с конструктором виджетов.

Вставляем полученный код виджета при помощи сниппета, указанного ниже. Код можно добавить в functions.php вашей активной дочерней темы. Либо тег <script> можно напрямую вставить в шаблон вместо функции comments_template() (но делать так я крайне не рекомендую):

<?php
add_filter(
    'the_content',
    function( string $content ): string {
        $content .= '
        <script async
                    src="https://telegram.org/js/telegram-widget.js?21"
                    data-telegram-discussion="wordpress_digest"
                    data-comments-limit="30"
                    data-colorful="1"></script>
        ';

        return $content;
    },
    9999999
);

Результат

Заходим на сайт и наблюдаем такую картину: