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

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

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

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

Линк с возможностью Instant View имеет внизу кнопку с изображением молнии и подписью «Посмотреть» или «View». Она добавляется, если для сайта был сделан шаблон быстрого просмотра. Его может создать автор канала или поста, а также разработчик сайта.

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

Шаблон – это набор правил и команд, которые указывают – какую информацию с исходной страницы следует выбирать. Бот Instant View следует этим инструкциям и с указанного сайта выбирает нужную информацию. Затем из нее формируется страница быстрого просмотра в Телеграмм.

Шаблон никак не связан с кодом сайта: при его построении последний не меняется. Здесь просто указываются теги, из которых надо брать данные, и правила, по которым следует это делать.

Как сделать Instant View в Телеграмме

Самой главной единицей API Instant View для Телеграмм являются свойства. Вы должны указать как минимум title и body. Содержимое этих разделов берется с исходной страницы. Для каждого из них вы должны вписать html-тег. Уточнять можно, добавляя его класс или ID. Например:

# В теге 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»)]

1. Зайдите на сайт и нажмите на кнопку «My templates». https://instantview.telegram.org/
2. Авторизуйтесь. У вас должен быть аккаунт в Телеграмм, подтверждение входа осуществляется через него.
3. Укажите URL-адрес любой статьи, для которой нужен Instant View.
4. Откроется страница с тремя горизонтальными окнами. В первом показан оригинал. Во втором будем указывать правила. В третьем увидим предпросмотр.
5. Чтобы вводить правила, вы должны разбираться в HTML-коде сайта, для которого создаете шаблон.
6. Для удобства откройте страницу в браузере и нажмите на ней правую кнопку мыши. Выберите «Просмотреть код». После этого рядом будет открыт фрейм, в котором отобразится исходный код документа. Наводите на любой блок страницы, и его теги будут подсвечиваться. Таким образом вы сможете увидеть все необходимое для построения правил.
7. Введите правила в среднее окно.
8. В правом сразу же отобразится превью для Telegram, корректируйте правила для достижения желаемого результата программу.
9. После создания нажмите кнопку «View in Telegram» (сверху справа), выберите получателя ссылки, и вы получите линк на ваш шаблон.

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

Теперь вы знаете, как работать с Instant View в Telegram. Чтобы не создавать шаблоны «с нуля», посмотрите примеры здесь https://instantview.telegram.org/samples/ Просто нажимайте на любой, и он откроется в редакторе.

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

Инструмент Instant View

Инструмент Instant View помогает открыть ссылки во встроенном браузере, не закрывая «Телеграм». Открывается не только текстовое наполнение, но и медиафайлы. Поддерживаются даже сайты, у которых нет мобильной версии. Это способствует экономии времени и ресурсов среди читателей каналов.

Принцип работы

Instant View для Telegram.

Instant view помогает настроить удобный предпросмотр сторонних ресурсов. Когда ссылка на сайт попадает в «Телеграмм», инструмент добавляет к ней окно предварительного ознакомления.

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

Преимущества

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

«Инстант Вью» работает одинаково хорошо со всеми типами сайтов, включая созданные на WordPress. Он требует намного меньше ресурсов, чем схожие системы в других социальных сетях.

Шаблон

На главной странице Instant view in Telegram можно ознакомиться с примерами верстки разных форматов. Бонусом редактора является минимальное количество данных, которые требуются боту: «Тайтл» и «Боди». Они дают программе ориентир. Первый идентификатор задает обозначение заголовка, второй – контента.

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

Как в Telegram сделать Instant View

Создать свой вариант шаблона для телеграм-канала можно в редакторе. Необходимо прописать свойства, title и body страницы. Задаются параметры при помощи html-тегов. Ниже приведена подробная инструкция данного процесса. Сделать instant view в телеграме может тот, кто хоть немного знаком с программированием.

Как прописать заголовок: title: //article//h1. Само содержимое шапки прописывается в теге DIV с атрибутом id=’title.

Персональный Instant View для Telegram.

«Тело» задается также тегом div, однако теперь нужно задать класс – subtitle. Чтобы добавить мультимедийные изображения, задают команду «Append».

Правила построения шаблона

Шаблон – сочетание правил, задающих внешний вид отображающейся информации в окне предпросмотра. Не стоит путать код сайта и шаблон. Они не связаны между собой.

Наиболее часто используемые переменные в создании шаблона:

• author – указывается автор;
• image_url – картинка, изображение;
• cover – видео-, аудиофайлы;
• author_url – активная ссылка на автора;
• subtitle – подзаголовок;
• published_date – время публикации.

Редактор Instant View Editor

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

Пошаговая инструкция

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

Пошаговая инструкция:

1. Ввести в адресную строку https://instantview.telegram.org/ и открыть этот сайт. Выбрать вкладку «My templates».
2. Создать учетную запись.
3. В специальной строке написать URL-адрес любой статьи, для которой нужен Instant View. Откроется новая вкладка с разными окнами: оригинал страницы, правила и предпросмотр.Пошаговое создание своего шаблона.
4. Открыть нужную страницу и просмотреть ее код (нажать правой кнопкой мыши на пустое место, выбрать «Просмотреть код»).
5. В среднем окне прописать правила.
6. Если содержимое не устраивает, откорректировать.
7. По завершению работы нажать кнопку «View in Telegram», которая находится в правом верхнем углу.
8. Выбрать получателей ссылки на шаблон и разослать его.

Обратите внимание! Ссылка работает лишь для постов, созданных отправителем.

Сейчас команда Телеграм проводит конкурс среди создателей шаблонов для сайтов.

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

Генерация и отправка ссылок

Изначальный вид ссылки от «Телеграм» не слишком привлекательный. Это длинный набор символов, который занимает большую часть в тексте. Сделать лаконичную и красивую ссылку можно всего двумя способами:

• использовать API Telegram и писать бота для отправки постов;
• с помощью готового (например, @ControllerBot). Этот робот понимает лишь HTML-команды. Он способен изменить длинное полотно в короткую ссылку за секунду.

Вознаграждение за шаблон

Система получения бонусов очень проста. Необходимо первым создать шаблон для сайта из представленного списка на сайте https://instantview.telegram.org/contest. Создателями платформы был выделен призовой фонд в размере 300 тысяч долларов.

Каждый участник может получить фиксированное вознаграждение. А тому, кто сможет сделать больше всех шаблонов, положено 10 000 долларов США. Занявшему второе место – $5 000 Дополнительно получить деньги можно, находя ошибки в чужих работах.

Понять принцип Instant View лучше всего удастся на практике. Конкурсы – дополни-тельный стимул освоить инструмент. Не стоит тянуть, ведь кроме получения навыка верстки, можно выиграть неплохое денежное вознаграждение.

Пошаговая инструкция построения шаблона представлена ниже:

Я люблю Телеграм, и люблю читать в статьи в Instant View. Причины: скорость, удобство, отсутствие рекламы, но самое главное — возможность создать IV для любого сайта за ~5-10 минут.

Я сказал “5-10 минут”? Ой, я имел в виду 2 года.

Скорость

^{Сравнение: Браузер | Приложение | Instant View}

Instant View быстр. Я понимаю, что его скорость обусловлена тем, что Телеграм уже открыт, а для открытия стороннего браузера/приложения нужно время. Но мне кажется, что IV работает быстрее AMP и Instant Articles.

Впрочем, выбор зависит лишь от того, где вы проводите больше времени — в мессенджере, браузере или приложении Facebook.

Шаблоны

Написать код для Instant View и правда можно за 5-10 минут. Достаточно прочитать мануал, посмотреть шпаргалку по XPath и нажать Ctrl+Shift+I. После задать элементы, содержащие тело и заголовок статьи, обрезать лишнее с помощью @remove и всё.

~version: "2.1"     # Последняя версия Instant View body: //div[has-class("post__text")]

Этого кода достаточно, чтобы перевести весь Хабр в Instant View. Однако многие сайты не так просты, поэтому в языке IV есть переменные, условия и функции.

Публикация

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

Единственный способ опубликовать статью в Instant View — это сделать ссылку вида https://t.me/iv?url=[ССЫЛКА]&rhash=[...], куда необходимо вставить ссылку на статью и rhash-идентификатор вашего Шаблона.

Удобно? Быстро? Красиво? Нет, нет, и ещё раз нет. Итоговую ссылку обычно прячут в текст, точку или неразрывный пробел. Я даже создал бесплатного бота, который делает это за пользователя.

В то же время на сайте IV написано, что есть и другой способ получить Instant View для своего сайта — дождаться одобрения вашего Шаблона от команды Телеграм. Я отправил свои Шаблоны (1, 2, 3). Прошло больше года — реакции не последовало.

Так что же делать

Единственный способ получить Instant View без костылей сейчас — зайти на сайт Конкурса IV, нажать Add Domain и добавить свой сайт.

Между первым и вторым Конкурсом прошло 2 года, и второй Конкурс длился в полтора раза дольше объявленного (комментарий победителя). Такими темпами прогноз, что вам придётся ждать 2 года, может оказаться слишком оптимистичным.

И желательно не менять разметку после Конкурса, потому что Instant View просто перестанет работать, и не факт, что это пофиксят.

Заключение

К сожалению, развитию и популярности самой скоростной технологии Телеграм мешает… сам Телеграм. Ваш сайт не получит Instant View, даже если вы сами напишете для этого идеальный код.

Я вижу решение в создании волонтёрских команд, как сделано с Переводами и Поддержкой, или же в увеличении количества сотрудников, работающих над IV.

Искренне надеюсь, что мессенджер не прекратит поддержку этой технологии и станет по-настоящему удобнее AMP-страниц и RSS-агрегаторов. Судя по вчерашнему объявлению конкурса на создание алгоритмов кластеризации и ранжирования контента, который очевидно будет встроен в Instant View, развитие продолжится.

Своей статьёй я лишь хочу привлечь внимание к этому узкому месту, которое сильно снижает потенциал развития всей платформы.

6 Ноября 2017

30 052

Многие хотят, чтобы на их сайте отображались статьи 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(, src, @content): //meta[@property="og:image"] cover: $@

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

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

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

Наверняка вы замечали в Telegram каналах ссылку, а под ней кнопку Instant View.

Наверняка вы задавались вопросом – как это сделать для себя?

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

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

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

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

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

Для этого можно использовать любой браузер и функцию “просмотреть код элемента”. При наведении на необходимые теги, на странице отображается участок страницы, что легко помогает определить нужный нам. В качестве примера я беру страницу со своего сайта https://zhan.blog/blog/sozdanie-svoego-personazha-v-griffinah.html. Ниже приведены 2 скрина охвата контента блоком div с классом “content“. Необходимо выбрать максимально информативный участок страницы без лишних блоков и заголовка статьи.

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

Добавляем строку: body: //div[has-class(“content”)] в правила нашего шаблона, где “content” есть class моего div блока (см. скриншот выше). Следующим шагом добавим строку: title: //h1[has-class(“single-blog-title”)], где “single-blog-title” class моего заголовка

Поэтому я буду использовать их для отображения остальных данных. Вы же можете сделать по примеру как с заголовком.

Добавляем строку: @append(, src, @content): //meta[@property=”og:image”] в правила нашего шаблона. В Этом правиле мы берем из мета-тега ссылку на изображение и конвертируем в картинку. Следующей строчкой добавляем: cover: [email protected] – здесь мы получим изображение и вставим в качестве обложки. В новой строке пишем: published_date: //meta[@property=”article:published_time”]/@content в правила нашего шаблона, здесь мы получаем данные с мета-тега article:published_time – это дата публикации статьи. Осталось добавить автора, для этого в новой строке пишем: author: //meta[@property=”og:site_name”]/@content все так же получаем из мета-тега автора.

Можно параметры прописать жестко, например автора: author: “zhan.shatmanov“

В итоге мы увидим:

Помимо этого вы можете в шаблон вашего сайта вставить мета-тег: name=”telegram:channel” content=”@zhan_shatmanov“> После этого в шапке вашей страницы, можно сделать блок, в котором будет отображаться название вашего канала и кнопка “Присоединиться”.

После всего, нужно сохранить шаблон и нажать на кнопку View in Telegram. В правом верхнем углу. После этого вы получите ссылку вида: https://t.me/iv?url=https%3A%2F%2Fshatmanov.com%2Fblog%2Fsozdanie-svoego-personazha-v-griffinah.html&rhash=3008ea592440bf где выделенное жирным – ссылка на вашу статью.

В итоге видим следующее

Это поможет вам улучшить свой Telegram канал!

Используемые источники:

• https://telegramzy.ru/instant-view/
• https://stelegram.ru/ispolzovanie/instant-view-dlya-telegram
• https://habr.com/ru/post/469299/
• https://spark.ru/user/76232/blog/33155/kak-legko-sdelat-instant-view-dlya-telegram-kanala
• https://shatmanov.com/blog/kak-legko-sdelat-instant-view-dlya-telegram.html