Есть одна очень удобная для пользователей штука - Telegram Instant View (IV). Она подгружает контент со ссылки прямо в приложении телеграма, показывая удобную для чтения версию и экономит трафик. Существует два официальных способа включить его для вашего сайта или блога:
Нерабочий: Добавить ваш шаблон в реестр шаблонов, а потом ждать аппрува. Который, возможно, никогда не наступит. Я свой отправил два (или даже три?) года назад, так ничего и не добавили.
Кривой: Формировать специальные ссылки с хешем вашего шаблона вроде
t.me/iv?url=...&rhash=.... Это работает для ручного постинга (например в ваш канал), но не будет работать при отправке ссылки пользователями прямой ссылки. Требуется поддержка этого со стороны софта, который у вас делает кросс-постинг (если не ведёте канал руками). Кроме того, ссылки сrhashвыглядят просто уродливо.
Есть один способ, как заставить Телеграм отображать Instantview глобально, для любых прямых ссылок вашего блога или сайта. Реализацию оформил в виде небольшого плагина для WordPress. Так же, способ без проблем адаптируется для других платформ.
Изыскания
Я давно уже видел Instant View у ряда популярных медиа и новостных сайтов, и очень уже мне нравилась эта фича - удобная и красивая. Захотелось себе конечно - поэтому быстренько гуглим официальный мануал, делаем шаблон для нашего сайта, добавляем и садимся ждать. Ждём год, два или три - и ничего не происходит. Видимо, команда Телеграма добавляет вручную только для некоторых сайтов, в категорию которых мой маленький бложик не входит. Все шаблоны триггерятся по имени домена. Но, как оказалось - не все.
Пока я ждал, случайно заметил что у моего товарища его карманный блог (на своём домене) отображает Instantvew, и на мой вопрос «как ты это сделал?» - ответ никак, просто завёл себе акк на teletype. И в этой блогоплатформе можно прикрутить свой домен, и все ссылки всё равно будут отображаться как InstantView без плясок с бубном.
Дело в том, что данная блого-платформа использует недокументированный способ активации шаблона, а именно мета-тегом:
<meta property="tg:site_verification" content="g7j8/rPFXfhyrq5q0QQV7EsYWv4=">На самом деле, одного тега недостаточно, необходимо ещё что бы контент был завернут в верстку определенной структуры. Мне удалось найти готовый сниппет на Github, за что огромное спасибо fishchev! Это сэкономило кучу времени. Собственно дальше способ напрашивается сам собой: если гора не идёт к Магомеду, то Магомед идёт к горе - будем подсовывать боту Телеграмма то, что он хочет увидеть :-)
Похоже, что Teletype - единственный с такой фичей, я просканировал список доменов из реестра шаблонов и не нашёл ни у кого подобных мета.
Реализация
Я веду свой бложик на WordPress с автоматическим кросс-постингом в основные социальные сети через fs-poster. Плагин кросс-постинга очень удобный, легко расширяется и допиливается своими хуками (у меня сделан автоматический выбор разных шаблонов и формата поста в зависимости от типа социальной сети и содержания - длиннопост, картинка + описание и т.п.). Для примера реализуем свой плагин для WordPress, что бы InstantView включался для всех постов в блоге и не требовал больше ничего. Готовый код плагина можно найти на Github или в Реестре плагинов.
Определяем бота Телеграма по юзер-агенту и суём ему другой шаблон:
<?php
function tgiv_instanview() {
global $wp_query;
// Activate only on single post page
if (1 !== $wp_query->post_count) {
return;
}
// Detect Telegram bot
if ('TelegramBot (like TwitterBot)' == $_SERVER['HTTP_USER_AGENT']) {
// Dsiplay special template to trigger IV
require (dirname(__FILE__) . '/tg-display.php');
// We are done, stop processing here
exit();
}
}
// Load replace function - just before header starts to be rendered
add_action('template_redirect', 'tgiv_instanview', 1);
?>Данный минимальный код устанавливает хук на событие, когда WordPress будет решать, какой шаблон ему выбрать. Добавляемся туда с высоким приоритетом и если нас смотрит бот - переходим на наш шаблон. В шаблоне тоже никакой магии:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta property="telegram:channel" content="@petro_ws">
<meta property="tg:site_verification" content="g7j8/rPFXfhyrq5q0QQV7EsYWv4=">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="content" class="site-content article">
<article class="article__content">
<div class="entry-content">
<div class="single-entry-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php the_content(); ?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php
if (get_the_category_list()) {
?>
<div class="cat-links">
<?php the_category(', '); ?>
</div>
<?php
}
if (get_the_tag_list()) {
?>
<div class="tags-links">
<?php the_tags('', ', '); ?>
</div>
<?php
}
?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
</div>
</body>Данный шаблон выводит содержимое поста в нужном формате, список категорий, тегов а так же ссылку на ваш канал. Этого уже достаточно и InstantView начинает работать для любых ссылок на посты - без плясок с бубнами с rhash. Предосмотр будет показываться для ссылок отправленных как лично, так и в каналы, так же с использованием любых способов кросс-постинга.
Теперь чужой шаблон работает, но есть одна проблема: если в посте использована Галерея картинок, то он будет отображать только первую. Это происходит из-за того что WordPress формирует набор вложенных тегов <figure>, что-бы исправить достаточно сделать ещё один небольшой хук и развернуть галерею при рендере в набор последовательных изображений:
<?php
function tgiv_extract_gallery($block_content)
{
// Find all images
if (preg_match_all('/<img[^>]+\/>/', $block_content, $out)) {
$html = '';
foreach($out[0] as $v) {
$html .= '<figure class="wp-block-image size-large">'.$v.'</figure>';
}
return $html;
}
return $block_content;
}
add_filter('render_block_core/gallery', 'tgiv_extract_gallery');
?>Теперь галереи отображаются как галереи:
Так же работают все элементы блога, что я обычно использую (такие как код):
Особенности
У Телеграма есть пара особенностей, о которых надо помнить:
Бот кеширует результат парсинга, и если определенная ссылка была уже запощена в Телеграм ранее, то бот второй раз ходить не будет. Возможно будет через какое-то время, как кеш протухнет. Можно заставить его перезапросить, если для теста модифицировать ссылку, вроде
https://site.com/post/?a=1, добавив мусор в query.Фича InstantView есть не на всех платформах (точно ещё не завезли на Linux Desktop, на Windows и Mac - пишут в комментариях что есть) :-) Да, звучит глупо, но я реально убил некоторое время, пытаясь понять, почему у меня он не включается на десктопном клиенте под Linux.
Послесловие
Надеюсь, данная информация будет кому-то полезной. У меня бложик некоммерческий и без рекламы, следовательно InstantView будет приятной фичей для пользователей, а я только выигрываю снижением трафика и нагрузки.
Отдельно вызывает недоумение, почему команда Telegram не сделала этот способ официальным? Добавили бы возможность подсунуть свой несчастный rhash в определенный мета-тег и всё было бы намного проще для пользователей. Но в итоге запилили замечательную фичу и бросили на полпути недоделанной.
Подписывайтесь на мой небольшой телеграм-канальчик, пишу там о жизни в Германии, умных домах и произвожу испытания всяких таких штук.
