Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать 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 уменьшает размеры всех картинок.
<?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)
iHelper
29.04.2018 20:53Вот, создавая такие туториалы, вы невольно проводите реверс-инжениринг первого предложения из этого поста :)
altrus Автор
30.04.2018 03:59Вы о том, что РКН заблокирует сайт journali.st?
Самый простой и эффективный способ — найдите бесплатный хостинг за бугром, посадите туда простенький php-proxy скрипт из пяти строчек, и через него обращайтесь к journali.st из своего виджета. Я так собираю rss с заблокированных сайтов.
altrus Автор
30.04.2018 03:55Хочу сказать. что пост перенесен администрацией в хаб «Я пиарюсь» как рекламный, но я не имею никакого отношения к авторам данного телеграм-бота.
Просто поделился интересной программой.
hMartin
01.05.2018 15:48+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 Автор
01.05.2018 16:07В принципе, тоже вариант, в идеале даже лучший, только вопросы:
1. как узнать id крайнего поста в канале?
2. если это js код для клиента, то как с Access-Control-Allow-Origin ??? Сервер t.me не отдает данные всем подряд
3. реализация real-time апдейта канала у клиента по мере поступления сообщений в канал
Получается, понадобится делать на своем сервере прокси канала и самому реализовывать его динамичный апдейт у клиентов. Не полчаса.hMartin
01.05.2018 19:22Да, пожалуй, погорячился по поводу получаса.
1. Тут придется воткнуть костыль и опрашивать на +10/20 айдишников в большую сторону от последнего успешного и где-нибудь сохранить
2. cors proxy
3. setInterval
altrus Автор
02.05.2018 05:211. ну, не 10/20, а пока не дойдешь до крайнего
в любом случае, это, наверное, единственный вариант отвеббить свой телеграм-канал
спасибо
mak_ufo
«Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым»
Это точно русский?
Joric
Жаров, перелогиньтесь.
alex6636
А почему нет?