Есть одна очень удобная для пользователей штука - 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 в определенный мета-тег и всё было бы намного проще для пользователей. Но в итоге запилили замечательную фичу и бросили на полпути недоделанной.
Подписывайтесь на мой небольшой телеграм-канальчик, пишу там о жизни в Германии, умных домах и произвожу испытания всяких таких штук.
Update v1.4
Выпустил обновление плагина, версию 1.4, содержит важный фикс и просьбы пользователей:
Плагин имеет опцию что-бы скрывать или показывать автора поста
Плагин имеет опцию что-бы скрывать или показывать дату поста
Плагин теперь не зависит от других установленных плагинов для SEO / OpenGraph: он сам выводит нужные мета-теги для поста, что бы превьюха корректно отображалась. Раньше, если не было никаких плагинов для отображения мета-данных для социальных сетей, то плагин не работал вообще. Теперь он не требует ничего, сам всё выводит как нужно - если есть мета-теги - использует их, если нет, то подставляет стандартные части поста Wordpress, что бы ссылка корректно отображалась
