Главное Свежее Вакансии   Проекты
26 813 23 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Многие хотят, чтобы на их сайте отображались статьи IV (Instant View), но доступной информации очень мало. В особенности, если вы не знаете элементарной верстки или английского языка. Сегодня покажу простой метод, который подойдет многим сайтам.

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

Первое, что нужно сделать - зайти на сайт https://instantview.telegram.org и залогиниться через Telegram. На этом сайте есть мануалы и примеры верстки страниц: medium.com, telegra.ph, telegram.org.

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

b_59ea54263421d.jpg

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

  1. Оригинальная страница
  2. Правила для отображения Instant View
  3. Предварительный просмотр

b_59ea36057f3b6.jpg

Первая и самая важная задача - определить тело страницы (body), которое будет отображаться правильно.

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

b_59ea39215ca2c.jpg

b_59ea392b8598b.jpg

Это не обязательно должен быть div, может быть article, p и другие. Самое главное, чтобы можно было идентифицировать нужный блок.

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

b_59ea3bcfaca92.jpg

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

Красивее будет смотреться, если в шапку нашего шаблона вставим превью страницы. На помощь приходит OG протокол (Open Graph protocol).

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

@append(<img>, src, @content): //meta[@property="og:image"]
cover: $@

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

b_5a008dce918dd.jpg

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

author: "readytospeak.ru"

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

author: //div[@class="author__title"]

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

Если посмотреть всю страницу целиком, то заметим небольшой баг в конце статьи.

b_5a0090f1ab248.jpg

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

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

Слово "Поделится:" находится в div-блоке с классом "ya-share2". Данный код означает "убрать из тела блок div с классом ya-share2".

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

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

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

В итоге получаем следующий код и страницу IV:

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

@append(, src, @content): //meta[@property="og:image"]

cover: $@

author: "readytospeak.ru"

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

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

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

<meta name="telegram:channel" content="@readytospeak">

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

b_5a009639a96ef.jpg

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

Telegram дает вам ссылку в следующем виде: https://t.me/iv?url=http%3A%2F%2Freadytospeak.ru%2Flearn-grammar-5-ways-09-2017%2F&rhash=f3a254578f8d53

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

https://t.me/iv?url=http%3A%2F%2Freadytospeak.ru%2FЗДЕСЬ ВАША ССЫЛКА%2F&rhash=f3a254578f8d53

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

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

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

  1. Использовать API Telegram и писать бота для отправки постов
  2. Использовать готовый (к примеру @ControllerBot)

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

b_5a00995ad57cf.jpg

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

b_5a009a2c5735e.jpg

Если у вас есть чем поделится, то пишите в комментариях ваши решения и идеи, замечания.

Примеры отображения страниц вы можете найти на канале: https://t.me/readytospeak

p.s. некоторые примеры кода вставлены обычным текстом потому что spark неверно их отображает в статье.

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Targetboy.ru
Привлечение клиентов для вашего бизнеса средствами таргетированной рекламы
Пётр Костюков
Спасибо за толковую статью! Особенно с картинкой из OG порадовали.
Ответить
Алексей Чередников
Спасибо за статью но почему то после проделанных манипуляций не появляется кнопка Instant View хотя на сайте настройки все показывает в чем может быть проблема?
Ответить
Ivan
Ну тут индивидуально.
Скинь сайт свой, гляну но завтра
Ответить
Петер Вессельс
как долго телеграм проводит модерацию шаблонов? Неделя уже прошла
Ответить
Ivan
У меня есть впечатление, что сейчас они забили. 3 сайта добавлял и ни ответа ни привета 3 месяца
Ответить
storyland.mobi
Конструктор мини-лендингов в формате Stories
Дмитрий Беговатов
Проделал описанные манипуляции, но вставляется просто некрасивая ссылка :( нет инстант вью никакого
Ответить
Ivan
дай ссылку на сайт)
Ответить
storyland.mobi
Конструктор мини-лендингов в формате Stories
Показать предыдущие комментарии
Ivan
бывает не сразу прогружается) подожди)
Ответить
storyland.mobi
Конструктор мини-лендингов в формате Stories
Дмитрий Беговатов
а пришли мне в @begovatovd плиз))
Ответить
Ivan
@append(<img>, src, @content): //meta[@property="og:image"]
cover: $@
author: //span[has-class("author vcard")]
body: //article
@remove:$body//footer
@remove:$body//div[has-class("yaddtoany_share_save_container addtoany_content addtoany_content_top")]
@remove:$body//span[has-class("byline")]
@remove:$body//div[has-class("entry-meta")]
Ответить
storyland.mobi
Конструктор мини-лендингов в формате Stories
Дмитрий Беговатов
по-новой пересобрал правила отображения – нихрена не поменялось :(
либо кривые руки, либо ПО как-то иначе отображает
Ответить
storyland.mobi
Конструктор мини-лендингов в формате Stories
Дмитрий Беговатов
по-новой пересобрал правила отображения – нихрена не поменялось :(
либо кривые руки, либо ПО как-то иначе отображает

UPD с мобилки посмотрел – есть :) спасибо
Ответить
Elizabeth Tikher
Последние 2 раза перестал отображаться инставью, хотя в ссылке ничего не изменяли :(
Ответить
Ivan
Гляну сегодня завтра, как раз новая статья будет
Ответить
Павел Соловьев
Дружище выручай, такая же беда как у многих, не появляется быстрый просмотр.

Вот ссылка пробной статьи - http://androidcore.ru/hello-world/
А вот что выдает - https://t.me/iv?url=http%3A%2F%2Fandroidcore.ru%2Fhello-world%2F&;rhash=ac5767838babe9

Поможешь?
Ответить
melnik
Описал telegram:channel, как в статье.
Вижу "Join" на превью на сайте.

А вот в IV нет "Join", только имя канала! Где ошибку искать?

Upd: со временем поста - та же фигня. На Preview отображается, на телефоне - нет.
Ответить
melnik
Upd2: хм... в Sample Template от Телеграмма - та же фигня; Join-а нет в IV

Написал "Задать вопрос" в Телеграм. Ответят - расскажу.

Upd3: Есть специальный бот @previews по Instant View. Там можно фидбэк давать ;-)
Ответить
melnik
Про "спрятать ссылку внутрь "a href..."

Тут такой нюанс:
Предполагаю, что ваш шаблон ещё не промодерирован - и "прямая ссылка" ещё не получает автоматически предпросмотр IV с кнопкой.

Если, при этом, ваш пост будут читать НЕ с мобильника, то ссылка на домен t.me может не открыться (в России) у пользователей Desktop и Web-версий Телеграма.

Поэтому, я начал делать так:
- ПЕРВУЮ БУКВУ ссылки оформляю ссылкой на IV (чтобы ниже превью с кнопкой отобразилось);
- остальную ссылку делаю в виде "прямой ссылки на страницу" - чтобы тот, кто жамкнет по ссылке тоже получил, что хочет - хоть и без IV.
Ответить
Игорь Байдов
Подскажите, пожалуйста, который день не могу решить проблему. При попытки настройки instant view выдает "An error has occurred while processing your template"
И вот как выглядит шаблон
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.