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



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

Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать 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. mak_ufo
    /#10783274

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

    Это точно русский?

    • Joric
      /#10783312

      Жаров, перелогиньтесь.

  2. iHelper
    /#10783336

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

    • altrus
      /#10783556

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

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

  3. altrus
    /#10783554

    Хочу сказать. что пост перенесен администрацией в хаб «Я пиарюсь» как рекламный, но я не имею никакого отношения к авторам данного телеграм-бота.

    Просто поделился интересной программой.

  4. hMartin
    /#10784486 / +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>


    Прикручиваете оффсеты, валидацию ответа еще за полчаса и вот вам альтернатива сторонним сервисам

    • altrus
      /#10784504

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

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

      • hMartin
        /#10784704

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

  5. altrus
    /#10784946

    1. ну, не 10/20, а пока не дойдешь до крайнего
    в любом случае, это, наверное, единственный вариант отвеббить свой телеграм-канал
    спасибо