Instant View Telegram – новый формат для просмотра ссылок

Instant View – это инструмент, позволяющий просматривать различные сайты во встроенном браузере мессенджера. Таким образом, если вы владеете каким-либо сайтом и вам следует встроить свою страницу в мессенджер, то для этого не нужно обращаться в поддержку. Для этого потребуются небольшие знания HTML-кода, и вы сможете встраивать свой сайт в телеграмм без проблем. Далее разберемся в работе и настройке Instant View в Telegram.

Как это работает

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

Как мы видим, кнопка «Посмотреть» отображается с картинкой и кратким содержимым, а сама она расположена слева внизу ссылки. Эта функция всплывает, если на сайте работает шаблон для быстрого просмотра ссылок. Его может сделать автор сообщества или разработчик сайта.

Что такое шаблон Instant View

Шаблон Instant View включает в себя команды, которые показывают какую информацию необходимо взять с исходного сайта. Далее бот Instant View следует указаниям шаблона и собирает информацию со страницы. После происходит формировка Instant View для приложения Telegram.

Как настроить Instant View в Телеграмме

Перед началом создания быстрого просмотра ссылок следует ознакомиться с созданием правильных шаблонов на официальном сайте  https://instantview.telegram.org/docs. Важно понимать, что для работы с Instant View должны быть минимальные знания HTML-кода. После ознакомления правил можно перейти к настройке самой разработки.

Инструкция:

  1. Переходим на сайт https://instantview.telegram.org и авторизуемся под своим логином от телеграмма. Далее открываем вкладку «My Templates».
  2. В появившемся окне мы видим адресную строку, в которую следует ввести URL-ссылку своего сайта.
  3. Итак, мы ввели ссылку на сайт и теперь видим 3 окошка. В первом отображается оригинал, во втором правила, по которым будет работать ваш Instant View, а в третьем – предпросмотр содержимого.
  4. Далее мы вводим правила в среднее окошко.Например:
    # В теге article должен присутствовать заголовок H1. Его содержимое и будет выведено как заголовок быстрого просмотраtitle: //article//h1
    # Заголовком будет содержимое тега DIV с атрибутом id=’title’title: //div[@id=»title»]
    #Тело – текст в теге div с классом subtitlebody: //div[has-class(«subtitle»)]
    Можно указывать и текстовую информацию:author: «Иванов Иван»
    Убрать лишние теги можно с помощью команды @remove:@remove: //div[has-class(«also»)]
    Для ознакомления всё будет выведено в окно предпросмотра. Если всё устраивает, то нажимаем на «View in Telegram» и отправляем ссылку в телеграмм.
    Содержимое для всех  разделов берется с исходной страницы браузера. Для каждого нужно вписать html-тег. Можно добавлять ID или класс элементов .
  5. Готово. Теперь ссылка в телеграмм канале отображается с функцией Instant View.

Видео: детальная инструкция настройки Instant View в Telegram

Оказывается, всё довольно просто. Теперь вы знаете как просто сделать Instant View в телеграмме. Для это нужно просто зайти на сайт, с поддержкой Instant View и ввести нужные правила.

Instant view
— моментальный просмотр блогов, новостей, статей прямо в telegram. Технология берет страницу с сайта и по определенным шаблонам убирает из нее все лишнее (например рекламу), далее уже в готовом виде предоставляет её пользователю.
Содержание

Что такой Instant view?

Как уже описывалось выше, Instant view дает возможность просматривать страницы сайта прямо в telegram. При чем лишние блоки в виде рекламы, бесполезных картинок  и баннеров вырезаются, что существенно снижает размер готового контента.

Такие страницы легко узнать по синей кнопке с молнией
.

Начиная с версии 4.0
были добавлены настройки в Instant view. Стало доступно изменение шрифтов и их размеров, смена тем, а также активация ночного режима.

Как это работает?

Когда вы отправляете ссылку через телеграмм, формируется предварительный просмотр сайта. Бот-парсер проверяет эту ссылку и определяет, имеется ли у этого сайта Instant view шаблон. Шаблон представляет собой набор правил и инструкций, по которым бот отбирает информацию и строит instant view страницу.

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

Instant View страницы чрезвычайно легки и кэшируются на серверах Телеграмма

, поэтому они загружаются мгновенно почти любой связи — отсюда и название.

Больше не нужно ждать загрузку неуклюжих сайтов, теперь вы можете получить все и сразу!

Наглядный пример

Слева — оригинал, справа — обработанная страница.

Даже если сайт не был оптимизирован для мобильных устройств, он все равно будет выглядеть удобно (во всех смыслах этого слова) через instant view.

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

Как создать шаблон Instant view?

Любой желающий может создать шаблон используя Instant View Editor

. После того, как шаблон будет одобрен, все пользователи телеграмм получат возможность просматривать страницу через Instant view.

Instant View Editor

Редактор позволяющий создавать свои собственные шаблоны для любых сайтов. Для того, чтобы начать достаточно перейти в Мои шаблоны и добавить URL-адрес для вашего шаблона и нажать кнопку «Enter». Откроется редактор. Исходная страница будет отображаться в левой части страницы.

Подробнее о публикации шаблонов »

Совет:
Используйте инструменты для разработчиков в вашем браузере (например: debug-режим в Chrome) , чтобы изучить HTML разметки страницы.

В средней части страницы находится рабочее поле, где вы создаете шаблон для выбранного доменного имени или URL.

Шаблоны состоят из простых инструкций (подробнее вы можете изучить синтаксис здесь

). После того, как вы сохранили свои правила для страницы, окно в правой части будет отображаться Instant View страницу, которую бот будет создавать на основе текущих инструкций.

Примеры шаблонов

Если вы хотите наглядно ознакомиться с готовыми шаблонами, то это можно осуществить перейдя на эту

страницу.  К этим шаблонам добавлено большое количество комментариев, так что разобраться в составлении инструкций будет довольно легко.

Вы можете  экспериментировать с данными шаблонами и посмотреть, как они изменяются. Не волнуйтесь, ваши изменения не будут применены к фактическим Instant view страницам, которые могут видеть обычные пользователи телеграмм.

Instant view для своего сайта

При создании шаблона для Instant view вы должны придерживаться 4 правил:

  • Создаем правила только для тех страниц, которые действительно в этом нуждаются
    .
  • Необходимо захватить все важное содержимое
    с исходной страницы.
  • Все ненужные элементы должны быть исключены
    из шаблона.
  • Шаблон должен хорошо работать с любой страницей сайта
    .

Смотрите также: Наш идеальный шаблон »

Это лишь краткое изложение того, что вы могли бы сделать.

Instant view страницы предлагают неограниченные возможности.

Вознаграждение за создание шаблонов Instant view

Создавать шаблоны для сайтов никто не будет. Был выделен фонд в размере 200.000$
, который будет распределен между создателями шаблонов.

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

Тому, кто создаст шаблонов больше все, достанется суперприз в 10.000$
в дополнение к обычным вознаграждениям.

За второе место предусмотрен приз в размере 5.000$
. Если вы не умеете создавать шаблоны, то вы всё равно можете получить вознаграждение. Для этого достаточно просто искать и отмечать ошибки, которые допустили разработчики шаблонов.

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

Продвинуть свой проект
—>

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

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

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

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

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

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

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

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

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


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

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


Open Graph protocol).

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

@append(

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

author: "readytospeak.ru"

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

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

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

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


Вылезло ненужное слово «поделится:», его очень легко убрать с помощью «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 вашего сайта следующую строку:

telegram:channel
» content
@readytospeak
«>

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

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

Не очень читабельно, но можно найти в этой ссылке название страницы. Когда вы будете выкладывать новый пост, вам не придется заходить на сайт 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 форматирование.

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

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

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

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

+3
Выбор редакции:

Дизайн старый, а ситуация страшная

Как измерить эффективность маркетинга: спортивные гонки между «директором по маркетингу» и «директором по продажам»

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

338

Рейтинг автора
5
Подборку подготовил
Андрей Ульянов
Наш эксперт
Написано статей
168
Ссылка на основную публикацию
Похожие публикации