Api telegram ссылка — Как легко сделать Instant View для Telegram канала

Есть чат Telegram Developers, где знающие люди подсказали и помогли сделать первоначальную верстку. В дальнейшем немного модернизировал её и сегодня вам покажу. Также есть официальный чат Telegram, посвященный Instant View https://t.me/IVpublic. Там можно найти ответ на любой вопрос, но этот чат полностью на английском языке.

Необходимо добавить страницу на примере которой будем делать шаблон. Этот шаблон в дальнейшем будет использоваться для остальных страниц (об этом чуть позже).

Переходим дальше и видим 3 поля:

Для этого можно использовать любой браузер и функцию «просмотреть код элемента». При наведении на необходимые теги, на странице отображается участок страницы, что легко помогает определить нужный нам. В качестве примера я беру страницу со своего сайта readytospeak.ru/learn-grammar-5-ways-09-2017. Ниже приведены 2 скрина охвата блоком div с классом «entry-inner». Необходимо выбрать максимально информативный участок страницы без лишних блоков и заголовка статьи.

Добавляем строку: body: //div[has-class("entry-inner«)] в правила нашего шаблона, где «entry-inner» есть class моего div блока (см. скрин выше). Теперь Telegram понимает, что отображать в IV, и получаем следующую картину.

Можно смело нажимать «mark as checked» и «view in telegram» и смотреть результат на своем мобильном устройстве. У вас уже будет полноценная страница IV, которую вы можете использовать для отображение сайта в Telegram. Выделенной красным цветом области у вас не будет. Об этом я расскажу чуть позже.

Добавляем следующий текст перед нашим body:

Функция append добавляет картинку в шапку нашего шаблона IV и страница выглядит еще лучше.

В следующем шаге мы добавим автора статьи. Добавим в наш код следующие строки:

На всех ваших страницах будет отображаться именно этот автор (ссылка на сайт). Если у вас в коде страницы есть блок, в котором содержится автор статьи, то можно применить следующий код:

«author__title» — класс блока div, в котором содержится имя автора (пример взят с сайта матч-тв ссылка)

@remove:$body//div[has-class("ya-share2«)]

Нужно добавить правило, которое будет указывать на каких страницах работает IV. Добавим следующий код:

Это правило будет выполняться для страниц на которых есть блок div с классом «entry-inner».

?exists: //div[@class="entry-inner"]

cover: $@

body: //div[has-class("entry-inner«)]

Теперь небольшая фича, которая поможет собрать подписчиков на канале. В шапке вашей страницы, можно сделать блок, в котором будет отображаться название вашего канала и кнопка «Присоединиться» (выше выделено красным цветом). Для этого необходимо добавить в head вашего сайта следующую строку:

Результат моей страницы можете увидеть на мобильном устройстве по ссылке.

Как сгенерировать ссылки вручную для других страниц

Не очень читабельно, но можно найти в этой ссылке название страницы. Когда вы будете выкладывать новый пост, вам не придется заходить на сайт IV, а просто вставите адрес страницы в эту ссылку.

Выкладываем красивую ссылку на ваш канал

Как быть, если ваш шаблон не прошел конкурс, а выкладывать такую большую «портянку» не хочется. Есть 2 решения:

Я расскажу про 2-ой вариант. Во-первых, в настройках этого бота необходимо включить html форматирование.

При отправке поста нужно использовать обычный тег … и вы спрячите вашу большую ссылку под красивым названием.