Главное Свежее Вакансии Образование
Выбор редакции:
38 270 24 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как легко сделать 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 76232
Ну тут индивидуально.
Скинь сайт свой, гляну но завтра
Ответить
Петер Вессельс
как долго телеграм проводит модерацию шаблонов? Неделя уже прошла
Ответить
Ivan 76232
У меня есть впечатление, что сейчас они забили. 3 сайта добавлял и ни ответа ни привета 3 месяца
Ответить
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Дмитрий Беговатов
Проделал описанные манипуляции, но вставляется просто некрасивая ссылка :( нет инстант вью никакого
Ответить
Ivan 76232
дай ссылку на сайт)
Ответить
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Дмитрий Беговатов
у меня вот так выглядит )
Ответить
Ivan 76232
бывает не сразу прогружается) подожди)
Ответить
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Дмитрий Беговатов
а пришли мне в @begovatovd плиз))
Ответить
Ivan 76232
@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")]
Ответить
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Дмитрий Беговатов
по-новой пересобрал правила отображения – нихрена не поменялось :(
либо кривые руки, либо ПО как-то иначе отображает
Ответить
Подкаст Стартап-секреты
Подкаст про стартапы и ИТ-бизнес
Дмитрий Беговатов
по-новой пересобрал правила отображения – нихрена не поменялось :(
либо кривые руки, либо ПО как-то иначе отображает

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

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

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

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

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

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

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

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

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

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

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