Хабрахабр

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

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

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

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

После несложной установки бота и настройки в нем своего нового 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-ом), свертывание блока с сообщениями по клику (чтобы не мешал).

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

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

Бесплатен, рекламы нет.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть