Как написать пост с картинками, видео и прочими ништяками (Как этот)

Телеграм выкатили обновление и теперь боты умеют публиковать посты с хитрой версткой. Дуров в X пообещал, что скоро появится редактор, но пока его нет.

Эта хитрая верстка называется Rich Messages. Через неё можно отправлять посты с заголовками, абзацами, картинками, видео, аудио, таблицами, цитатами, коллажами, слайдшоу и прочими радостями.

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

В любом случае, вам нужен бот, заведите его через @BotFather и сохраните токен, никому его не показывайте, в том числе нейронкам. Мало ли чего они там запомнят.

Чтобы публиковать сразу в канал, добавьте бота в админы канала, выдайте права на публикацию и редактирование. Этого достаточно.

Теперь нужно сверстать текст и отправить POST-запрос с нужными параметрами.

Текст проще всего сверстать в формате markdown. Я для этого использую Obsidian. А еще есть неплохой экспорт в markdown прямо из гугл-документов. Но естественно они поддерживают не все фичи телеграма, и для некоторых нужно допилить верстку руками. Например, для коллажей или слайдшоу.

Сообщение можно отправить через метод sendRichMessage любым удобным способом. Хоть через постман, хоть через curl. Параметры, которые нужно указать: chat_id — id чата или username канала, например @lead_frontend_mentor rich_message — объект с содержимым поста. Внутри rich_message нужно передать markdown или html.

Я использую Node.js, потому что я люблю JavaScript и мне так проще всего.

Пример файла bot.js: const token = process.env.BOT_TOKEN; const chatId = process.env.CHAT_ID;

const markdown =

#Заголовок поста

Обычный абзац текста.

Жирный текст

!;

const response = await fetch(https://api.telegram.org/bot${token}/sendRichMessage, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ chat_id: chatId, rich_message: { markdown, }, }), });

const data = await response.json();

if (!data.ok) { throw new Error(data.description); }

console.log('chat_id:', data.result.chat.id); console.log('message_id:', data.result.message_id); В ответ придет объект, из него пригодятся параметры message_id и chat.id, по ним потом можно найти и отредактировать опубликованный пост с помощью метода editMessageText: await fetch(https://api.telegram.org/bot${token}/editMessageText, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ chat_id: chatId, message_id: messageId, rich_message: { markdown:

#Обновленный заголовок

Пост отредактирован.

! ! !

Текст после коллажа. , }, }), });

Нюансы:

  • сначала лучше публиковать в личку или в канал с черновиками

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

  • разные клиенты телеграма по разному рендерят текст. Разные шрифты, разные отступы. В общем, чего взять с олимпиадников — главное что работает. Поэтому смотрите с разных клиентов и ищите компромисс

  • у rich-постов есть лимиты: до 32768 символов, до 50 медиа-вложений

Что еще посмотреть:

1. Паша Молянов сделал бота, которого можно развернуть у себя на компе или vps.

2. Ноунейм из UX live сделал обзор на возможности и показал как может выглядеть редактор.

3. Документация телеги тут

4. TipTap - модный фреймворк, на котором я завайбкодил свой редактор для телеги

Лайк, репост, подписка⤵️

В этом посте были ссылки, но мы их удалили по правилам Сетки