История одной идеи: как я пытался подружить TenChat и Instant View в Telegram

С чего всё началось

Идея родилась из очень практичного желания: не копировать посты вручную и не гонять читателей между платформами. Хотелось публиковать в Telegram посты из TenChat так, чтобы их можно было читать прямо в ТГ — быстро, без лишних кликов и без необходимости переходить в TenChat. По сути: один пост, одна ссылка, одно удобное чтение.

Видели в ТГ публикации с других площадок - заголовок, одна-две первые фразы и кнопка «посмотреть»? Нажимаешь и видишь всю публикацию, не надо переходить на сайт. Вот это оно. (скрин ниже)

Технология Instant View (мгновенный просмотр) позволяет пользователям Telegram просматривать контент прямо в приложении без необходимости открывать внешний браузер или ждать загрузки сайта. Если для домена teletype.in существует официальный или одобренный шаблон Instant View, все внутренние ссылки на статьи, соответствующие этому шаблону, будут автоматически использовать ту же технологию.

Это обеспечивает бесшовный и быстрый процесс чтения, когда вы можете переходить от одной статьи к другой, не покидая интерфейс Telegram

Зачем вообще нужен был бот

Базовый сценарий выглядел просто:

• я пишу или нахожу пост в TenChat;
• публикую его в своём канале в Telegram;
• читатель открывает его без перехода на исходную площадку.

Варианты реализации без бота — стандартный репост ссылок, ручное копирование текста, сторонние интеграции.

Они работают, но: либо добавляют лишние действия, либо не дают того самого «один тап — и читаю здесь».

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

Ну и я хотел сделать то, чего ещё не было, и бот мог пригодиться не только мне.

Основные пути реализации Instant View для сайтов,

которые не поддерживаются Telegram по умолчанию, как в случае с TenChat:

1. Создание собственного шаблона и его официальное одобрение Telegram (сложный и долгий процесс).
2. Использование тестовой ссылки (работает только для вас и тех, у кого есть специальная ссылка с вашим токеном).
3. Реализация через специального бота (самый удобный способ для распространения среди широкой аудитории без официального одобрения).

Третьим путем я и пошел. Этот метод требует создания своего собственного бота в Telegram и использования Telegram API. У меня уже стояла среда для Python и я установил библиотеки для программирования бота. Можно было возможность использовать готовые платформы-конструкторы ботов. Но в сторону платформ я не смотрел.

Шаг 1: Создайте своего Telegram-ботаВам понадобится токен вашего бота.

1. Найдите в Telegram бота @BotFather.
2. Отправьте ему команду /newbot.
3. Следуйте инструкциям, придумайте имя и username для бота.
4. В конце @BotFather выдаст вам HTTP API Token (длинный набор букв и цифр) — сохраните его в надежном месте.

Шаг 2: Создайте шаблон Instant View для TenChat

Это ключевой шаг. Вам нужно научить Telegram "читать" структуру постов TenChat.

1. Перейдите на сайт Telegram Instant View Editor и войдите с помощью своего аккаунта Telegram.
2. Нажмите "New Template".
3. Введите пример ссылки на ваш пост в TenChat (например, tenchat.ru) и нажмите "Build".
4. Вам нужно будет написать правила (XSLT-подобный синтаксис) для извлечения заголовка, автора, текста, изображений и видео из HTML-кода страницы TenChat.
5. После создания и отладки шаблона в редакторе, вы получите Template ID (идентификатор шаблона) и токен.

Это самый сложный этап, требующий понимания HTML-верстки TenChat.

Он занял больше всего времени: разобраться в верстке (контейнеры, классы, переключатели и т.д.), написать код, попытаться отладить, одновременно выясняя в чем причина неполадок и исправляя код, понять непреодолимое ограничение.

Непреодолимое для выбранного способа реализации - через телеграмм бота.

Писать код самостоятельно? Неет, для гуманитария типа меня это было бы слишком. На помощь был призван ИИ-асистент

Шаг 3: Используйте API вашего бота для генерации IV-ссылок

Когда у вас есть токен бота (из Шага 1) и Template ID (из Шага 2), вы можете генерировать специальные ссылки, которые заставят Telegram открывать IV с помощью вашего шаблона.

Найти Template ID оказалось не очевидным действием, но разобраться легко и быстро.

Вам нужно использовать метод Telegram API generateWebAppUrl или просто создавать URL-адреса в формате:

t.me

Ваш бот должен быть запрограммирован так, чтобы при получении команды /start iv_... он использовал ваш пользовательский шаблон для открытия нужной страницы TenChat.

Я опускаю технические термины или примеры кода. Поскольку решение не было реализовано. А общий алгоритм, если вдруг решить сделать что-нибудь подобное - выше. Этой базы достаточно. Чтобы дальше двигаться в глубину в зависимости от задачи.

В завершение еще раз кратко что было сделано и какую ценность имела для меня неуспешная попытка.

Что было сделано

Следующий шаг — более амбициозный: сделать бота, который по ссылке на пост TenChat отдаёт Instant View, как это работает для блогов и Teletype. Идея была красивая:

• в Instant View Editor настроить шаблон для домена TenChat;
• подключить к нему бота, который формирует ссылки требуемого вида
• добавить бота в канал, чтобы любой пост из TenChat открывался в Telegram как чистая Instant View страница.

Что именно было сделано. Дальше началась практическая часть:

• Изучение HTML кода страницы TenChat;
• попытки понять, где живёт заголовок, автор, текст и медиаконтент;
• написание правил в синтаксисе Instant View (XPathподобные селекторы, body, title, author, и т.д.).

Было несколько итераций: поиск правильного контейнера текста, минимизация правил до «короткого шаблона», эксперименты с тем, что мешает тексту появляться в Instant View. По ходу пришлось разобраться в таких вещах, как:

• структура HTML TenChat ;
• ограничения Instant View (работа только с тем HTML, который Telegram получает без выполнения JavaScript);
• собственный синтаксис правил и т.п..

Процесс поиска решения был не прямолинейным:

часть попыток давала только заголовок и автора, часть ломала Instant View целиком, гдето приходилось откатываться к более простым версиям.

Но на уровне понимания устройства платформы и инструментов прогресс был заметный.

Что помогло продвинуться

Основной мой ресурс здесь —

• не готовые рецепты, а умение быстро ориентироваться в незнакомой связке «платформа + инструмент»:
• разбирать структуру и вычленять смысловые блоки, а не просто смотреть на «полученный ответ»;
• улавливать детали ;
• задавать правильные вопросы: «где именно появляется текст?», «что видит Telegram?», «что может его вырезать?»;

и быстро проверять гипотезы короткими изменениями в шаблоне.

Главный вывод: знание ограничений важнее энтузиазма

Изначально предположение было простым: если есть страница с текстом, то для неё можно сделать Instant View. На практике выяснилось, что код TenChat устроен сложнее: значимая часть содержимого формируется и дорисовывается через JavaScript на стороне клиента, а Instant View работает только с тем, что есть в статичном HTML, без выполнения скриптов.

Это принципиальное ограничение: шаблон в Instant View Editor нельзя «научить» работать с тем контентом, который Telegram изначально не получает.

И об ограничении я узнал пройдя предыдущий путь, а не допустив и не спросив своего электронного советчика. Например - а какие есть ограничения?

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

Главное, что дал мне этот опыт — очередное подтверждение и уверенность, что в новой теме могу достаточно быстро:

• разобраться в базовых понятиях,
• увидеть ограничения,
• и предложить рабочие альтернативы, даже если первоначальный путь упирается в архитектуру платформы, а не в навыки разработчика.

Что дальше

Идея «читать TenChat и другие площадки прямо в Telegram» никуда не делась. Просто стало очевидно, что для TenChat удобнее идти через бота, который сам парсит пост и отправляет в канал аккуратный текстовый формат, а Instant View — использовать там, где платформа этому действительно соответствует (например, для блогов или Teletype).

Будет ли идея реализована? Может быть.

Понравилась статья, была полезной? Поддержи автора