Включаем Telegram Instantview для блога глобально12.04.2024 13:45

Есть одна очень удобная для пользователей штука — Telegram Instantview. Она подгружает контент со ссылки прямо в приложении телеграма, показывая удобную для чтения версию и экономит трафик. Существует два официальных способа включить его для вашего сайта или блога:

• Нерабочий: Добавить ваш шаблон в реестр шаблонов, а потом ждать аппрува. Который, возможно, никогда не наступит. Я свой отправил два (или даже три?) года назад, так ничего и не добавили.

• Кривой: Формировать специальные ссылки с хешем вашего шаблона вроде t.me/iv?url=...&rhash=.... Это работает для ручного постинга (например в ваш канал), но не будет работать при отправке ссылки пользователями прямой ссылки. Требуется поддержка этого со стороны софта, который у вас делает кросс-постинг (если не ведёте канал руками). Кроме того, ссылки с rhash выглядят просто уродливо.

Есть один способ, как заставить Телеграм отображать Instantview глобально, для любых прямых ссылок вашего блога или сайта. Реализацию оформил в виде небольшого плагина для Wordpress. Так же, способ без проблем адаптируется для других платформ.

Изыскания

Я давно уже видел Instantview у ряда популярных медиа и новостных сайтов, и очень уже мне нравилась эта фича — удобная и красивая. Захотелось себе конечно — поэтому быстренько гуглим официальный мануал, делаем шаблон для нашего сайта, добавляем и садимся ждать. Ждём год, два или три — и ничего не происходит. Видимо, команда Телеграма добавляет вручную только для некоторых сайтов, в категорию которых мой маленький бложик не входит. Все шаблоны триггерятся по имени домена. Но, как оказалось — не все.

Пока я ждал, случайно заметил что у моего товарища его карманный блог (на своём домене) отображает Instantvew, и на мой вопрос «как ты это сделал?» — ответ никак, просто завёл себе акк на teletype. И в этой блогоплатформе можно прикрутить свой домен, и все ссылки всё равно будут отображаться как InstantView без плясок с бубном.

Дело в том, что данная блого-платформа использует недокументированный способ активации шаблона, а именно мета-тегом:

На самом деле, одного тега недостаточно, необходимо ещё что бы контент был завернут в верстку определенной структуры. Мне удалось найти готовый сниппет на Github, за что огромное спасибо fishchev! Это сэкономило кучу времени. Собственно дальше способ напрашивается сам собой: если гора не идёт к Магомеду, то Магомед идёт к горе — будем подсовывать боту Телеграмма то, что он хочет увидеть :-)

Похоже, что Teletype — единственный с такой фичей, я просканировал список доменов из реестра шаблонов и не нашёл ни у кого подобных мета.

Реализация

Я веду свой бложик на Wordpress с автоматическим кросс-постингом в основные социальные сети через fs-poster. Плагин кросс-постинга очень удобный, легко расширяется и допиливается своими хуками (у меня сделан автоматический выбор разных шаблонов и формата поста в зависимости от типа социальной сети и содержания — длиннопост, картинка + описание и т.п.). Для примера реализуем свой плагин для Wordpress, что бы InstantView включался для всех постов в блоге и не требовал больше ничего. Готовый код плагина можно найти на Github или в Реестре плагинов.

Определяем бота Телеграма по юзер-агенту и суём ему другой шаблон:

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 будет решать, какой шаблон ему выбрать. Добавляемся туда с высоким приоритетом и если нас смотрит бот — переходим на наш шаблон. В шаблоне тоже никакой магии:

>

    
    
    
    

>


	

		

			
		
		
	

	

Данный шаблон выводит содержимое поста в нужном формате, список категорий, тегов, а так же ссылку на ваш канал. Этого уже достаточно и InstantView начинает работать для любых ссылок на посты — без плясок с бубнами с rhash. Предосмотр будет показываться для ссылок отправленных как лично, так и в каналы, так же с использованием любых способов кросс-постинга.

Теперь чужой шаблон работает, но есть одна проблема: если в посте использована Галерея картинок, то он будет отображать только первую. Это происходит из-за того что Wordpress формирует набор вложенных тегов

]+\/>/', $block_content, $out)) {
        $html = '';
        foreach($out[0] as $v) {
            $html .= '
'.$v.'
';
        }
        return $html;
    }

    return $block_content;
}
add_filter('render_block_core/gallery', 'tgiv_extract_gallery');
?>