Вывод Telegram-канала на свой вебсайт

  • Tutorial
Забьем еще один гвоздь в крышку гроба Роскомнадзора.

Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым.

Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.

После несложной установки бота и настройки в нем своего нового journalist канала, получаете от него код виджета, который нужно поместить на свой сайт в какой-нибудь div или что-то типа этого, который выведет адаптивную вертикальную ленту ваших сообщений:

<p class="center"><a href="https://t.me/channelname" target="_blank">Подписаться</a></p>
<script id="journalist-broadcast-353945930" async defer src="https://journali.st/broadcasts/353945930-widget-10.js"></script>

Где 353945930 — id вашего канала в JournalistBot-е. Число 10 в «widget-10» — количество последних отображаемых сообщений. Его можно менять.

Новые сообщения для вашего канала добавляются в JournalistBot или напрямую, или переадресацией в него из других каналов. Иногда (единственный замеченный баг) сообщение, в котором присутствует и картинка и текст, доходит не полностью — или картинка, или текст. В остальном всё вполне на уровне. Каналов можно сделать несколько.

Основные прелести виджета:

  • код разворачивается напрямую, без iframe-ов.
  • внешний вид (сам по себе приятный и стильный) легко перенастраивается своим css
  • оперативная автоматическая подгрузка новых сообщений из канала по мере их поступления (появляются сверху)

Можно сделать небольшой хак — проксировать данные канала (https://journali.st/broadcasts/353945930-widget-10.js) через свой сайт. Тогда будет возможность немножко их редактировать.

Например, у меня реализован вот такой кэширующий на 5 минут данные прокси, который отдельным скриптом /misc/image.php уменьшает размеры всех картинок.

Код journalist прокси
<?php

$file = "journalist.cache.js";

$LastModified_unix = filemtime($file);
$LastModified = gmdate("D, d M Y H:i:s \G\M\T", $LastModified_unix);
$IfModifiedSince = false;
if (isset($_ENV['HTTP_IF_MODIFIED_SINCE']))
    $IfModifiedSince = strtotime(substr($_ENV['HTTP_IF_MODIFIED_SINCE'], 5));  
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
    $IfModifiedSince = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'], 5));
if ($IfModifiedSince && $IfModifiedSince >= $LastModified_unix) {
    header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
    exit;
}
header('Last-Modified: '. $LastModified);



if (!file_exists($file) || (time() - filemtime($file)) > 1200) {
	$data = file_get_contents("https://journali.st/broadcasts/353945930-widget-10.js");
	$data = str_replace("https://images-onepick-opensocial.googleusercontent.com/gadgets/proxy?container=onepick&url=", "/misc/image.php?size=310&url=", $data);
	file_put_contents($file, $data);
}

readfile($file);

?>


В вышеуказанном script src необходимо поменять ссылку на наш прокси. Новые сообщения приходят клиенту, естественно, напрямую, минуя прокси.

Еще из рекомендуемой доводки напильником: скроллбар (стандартный или JQuery плагином) для блоков с ограниченной высотой, подцепка к картинкам lightbox-а (или на стороне сервера добавлением class-a, или на стороне клиента javascript-ом), свертывание блока с сообщениями по клику (чтобы не мешал).

Для lightbox-a следует учесть динамическое поступление новых картинок (сообщений). Для этого случая можно запускать обработку картинок в блоке канала каждые 10 секунд, например, или повесить обработчик событий на код journalist-а.

В целом Journalist — очень приятное и стабильное приложение, позволяющее оперативно и удобно добавлять на свой сайт информацию с компьютера или телефона — вести трансляции, например. Как отдельный telegram-канал канал в journalist не работает, поэтому при такой необходимости приходится дублировать сообщения.

Бесплатен, рекламы нет.
Поделиться публикацией
Похожие публикации
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 10
    +1
    «Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым»

    Это точно русский?
      0
      Жаров, перелогиньтесь.
        0

        А почему нет?

        0

        Вот, создавая такие туториалы, вы невольно проводите реверс-инжениринг первого предложения из этого поста :)

          0
          Вы о том, что РКН заблокирует сайт journali.st?

          Самый простой и эффективный способ — найдите бесплатный хостинг за бугром, посадите туда простенький php-proxy скрипт из пяти строчек, и через него обращайтесь к journali.st из своего виджета. Я так собираю rss с заблокированных сайтов.
          +1
          Хочу сказать. что пост перенесен администрацией в хаб «Я пиарюсь» как рекламный, но я не имею никакого отношения к авторам данного телеграм-бота.

          Просто поделился интересной программой.
            +1
            Зачем такие сложности с ботами и чужими сервисами, когда телеграмм предоставляет апи доступа к постам в каналах?
            Создаете свой канал и тяните себе jsом или обрабатываете на сервере:
            t.me/канал/ид_поста?embed=1
            Пример за пять минут:
            var urls = ['https://t.me/lentach/27600?embed=1', 'https://t.me/lentach/27601?embed=1', 'https://t.me/lentach/27602?embed=1'];
            Promise.all(urls.map(url =>
                fetch(url).then(resp => resp.text())
            )).then(texts => {
            	let parser = new DOMParser();
            	let parsedHtml = parser.parseFromString(texts, 'text/html');
            	let bodyText = parsedHtml.getElementsByClassName("tgme_widget_message_text");
                for (let i = 0; i < bodyText.length; i++) {
              		console.log(bodyText[i].innerHTML);
            	}
            })
            

            Output:
            В Москве представили первый дом по программе реновации, и он уже готов к заселению<br><br>Фото: <a href="http://lentach.media/6c60" target="_blank" rel="noopener">http://lentach.media/6c60</a>
            Киевский Совет одобрил снос храма Московского патриархата, который находится на месте первого каменного храма Киевской Руси<br><br><a href="http://lentach.media/f234" target="_blank" rel="noopener">http://lentach.media/f234</a>
            Под авиаудар американских сил в Сирии попали российские наёмники, сообщают иранские СМИ<br><br><a href="http://lentach.media/c660" target="_blank" rel="noopener">http://lentach.media/c660</a>


            Прикручиваете оффсеты, валидацию ответа еще за полчаса и вот вам альтернатива сторонним сервисам
              0
              В принципе, тоже вариант, в идеале даже лучший, только вопросы:
              1. как узнать id крайнего поста в канале?
              2. если это js код для клиента, то как с Access-Control-Allow-Origin ??? Сервер t.me не отдает данные всем подряд
              3. реализация real-time апдейта канала у клиента по мере поступления сообщений в канал

              Получается, понадобится делать на своем сервере прокси канала и самому реализовывать его динамичный апдейт у клиентов. Не полчаса.
                0
                Да, пожалуй, погорячился по поводу получаса.
                1. Тут придется воткнуть костыль и опрашивать на +10/20 айдишников в большую сторону от последнего успешного и где-нибудь сохранить
                2. cors proxy
                3. setInterval
              0
              1. ну, не 10/20, а пока не дойдешь до крайнего
              в любом случае, это, наверное, единственный вариант отвеббить свой телеграм-канал
              спасибо

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

              Самое читаемое