Что такое Instant view в Telegram?
Вы наверняка видели, что многие посты в Telegram-каналах оформлены в виде ссылки с превью. Если нажать на нее, то она откроется во встроенном браузере мессенджера. Данная функция называется Instant view – просмотр ссылок прямо в Telegram. Сегодня мы расскажем вам, как это работает, для чего нужно и как создать свой собственный шаблон для просмотра страниц в мессенджере.
Что такое Instant view?
Опция моментального просмотра позволяет открывать веб-страницы прямо в Telegram. Это позволяет сэкономить время на открытии стороннего браузера, отключает все рекламные объявления на странице и защищает пользователей от любых угроз, которые могут находится на открываемом сайте.
Ссылки, которые можно открыть в мессенджере, обозначаются синей кнопкой с молнией и надписью Instant view. Если вы являетесь автором такого поста, вы можете сами задавать шрифты для текста внутри него, менять тему и так далее.
Как работает Instant view?
Вам нужно лишь скопировать ссылку и отправить ее кому-нибудь в Telegram. Превью создастся автоматически, если бот мессенджера обнаружит в приложении шаблон для такой страницы.
Шаблоны моментального просмотра – это свод правил и алгоритмов, исходя из которых бот создает превью страницы в Telegram – удаляет все лишнее и выводит аккуратный текст в Instant view.
Данная функция также полезна тем, что позволяет открывать веб-страницы гораздо быстрее, чем в обычном браузере. Но даже это еще не все плюсы паттернов Instant view.
Преимущества шаблона
- Если исходный сайт не адаптирован для просмотра с мобильного устройства, Instant view сделает страницу максимально читабельной и приятной.
- Без рекламы и прочих ненужных скриптов читать текст становится гораздо удобнее.
- Страницы грузятся быстро, так как все лишнее отключается и остается только текст.
- Переходя по ссылке в Instant view вы все еще остаетесь в Telegram. Не нужно переходить в другие приложения, тратить время и трафик.
- Функцию можно отключить в настройках при необходимости, тогда вы будете открывать все ссылки в браузере.
Как сделать шаблон Instant view?
Редактор Instant view Editor дает возможность создавать свои шаблоны для предпросмотра. Для добавления вашего паттерна в Telegram, он должен пройти модерацию – тогда его можно будет использовать для просмотра в мессенджере статей с вашего сайта.
Редактор IVE позволяет создавать паттерны для любых ресурсов. Чтобы сделать свой шаблон, перейдите на сайт instantview.telegram.org, и нажмите на раздел Editor. Здесь изложена подробная интсрукция, правда для ее понимания вам придется выучить английский язык, так как русской локализации там нет. Если с иностранными языками у вас туго, можно воспользоваться переводчиком или записаться на курсы (все равно в жизни пригодится) с профессиональными преподавателями, например, здесь: https://yes-grodno.by/
Запустив Instant view Editor, зайдите в раздел «Мои шаблоны», пройдите процесс регистрации и оставьте ссылку на нужную веб-страницу. Далее откроется сам редактор с дальнейшими подробными инструкциями.
Правила создания Instant view
- Не создавайте несколько шаблонов к разным страницам одного сайта.
- Не упустите нужный текст со страницы.
- Удалите все ненужное, что утяжеляет статью и делает ее открытие медленнее: рекламные баннеры и все прочее.
- Сделайте так, чтобы ваш паттерн исправно работал на всех страницах сайта. Повторюсь: не нужно создавать разные шаблоны для разных страниц.
Данный ресур является неофициальным сайтом фан-клуба приложения Telegram. Все текстовые, графические и видео материалы взяты из окрытых источников и носят ознакомительный характер. В случае возникновения споров, претензий, нарушений авторских или имущественных прав, просьба связаться с администрацией сайта.
Instant View посты в Telegram на своём домене
Показываю способ, которым можно создавать симпатичные Instant View посты, и при этом оставлять контент на своём домене, а не использовать telegra.ph или medium.
1. Идём на instantview.telegram.org регистрируемся, входим на сайт и переходим к instantview.telegram.org/my/
2. В поле «Enter a URL to create or edit the corresponding template» вводим адрес страницы на нашем сайте. Жмём Enter.
3. На открывшейся странице видим три секции — секция с просмотром страницы сайта слева, секция для шаблона в центре и секция для предпросмотра Instant View справа.
4. В средней секции пишем свой шаблон, убеждаемся что в правой секции всё выглядит хорошо. Если шаблон мы писать пока что не умеем, переходим вот сюда, и берём для примера готовый шаблон, например для telegra.ph
5. Жмём Mark as checked, затем View in telegram в правом верхнем углу.
6. Полученную в сообщении ссылку вида t.me/iv?url=…&rhash=…
https://t.me/iv?url=https%3A%2F%2Fsysadmin.pm%2Fkryptonite-and-id-rsa%2F&rhash=d82bb075aec0fd
… пересылаем, например себе, и уже её используем в статьях на канале, при формировании статьи ботом и т. п. Эта ссылка будет сразу же открывать Instant View просмотр страницы сайта.
Пользуйтесь, распространяйте, давайте вместе сделаем информацию в Telegram ещё доступнее. @SysadminNotes.
Добавлено чуть позже…
С несколькими подписчиками выяснили, что на некоторых клиентах, созданные вот так Instant View ссылки могут не открываться. Судя по всему, связано это с тем, что клиенты (построенные на версии 3.18.1) не понимают ссылки вида t.me/iv?url=, ожидая что тут должен оказаться юзернейм, а не адрес сайта. Сделать с этим что-то пока что нельзя. Совсем недавно, были открыты исходники версии 4.1.1, стоит дождаться когда разработчики обновят свои приложения до актуального состояния, скорее всего тогда Instant View ссылки на собственные домены заработают корректно у всех.
3 thoughts on “ Instant View посты в Telegram на своём домене ”
remontokna :
Как уже описывалось выше, Instant view дает возможность просматривать страницы сайта прямо в telegram. При чем лишние блоки в виде рекламы, бесполезных картинок и баннеров вырезаются, что существенно снижает размер готового контента.
От себя добавлю: если не хотите что бы при генерации не было t.me, а название Вашего сайта, нужно добавить в head шаблона:
Инстант-вью в Телеграме
У меня всё время спрашивают, когда Эгея начнёт поддерживать Инстант-вью Телеграма. Я попытаюсь объяснить, почему этот вопрос, насколько я знаю, не имеет смысла.
Инстант-вью в Телеграме сделан через жопу, и Эгея не может его поддерживать или не поддерживать. Там нужно для каждого сайта отдельно объяснять Телеграму, как он устроен, чтобы Телеграм смог сделать его инстант-вью. То есть у них специальный язык, на котором ты объясняешь разметку сайта Телеграму, чтобы он понял, где там заголовок, где текст статьи, где какие ещё элементы. И тот факт, что почти все сайты на Эгее устроены одинаково под капотом, для Телеграма ничего не значит — нужно для каждого сайта писать такой шаблон отдельно.
Но это ещё полбеды. Я мог бы выложить шаблон для сайтов на Эгее где-то, чтобы вы могли рассказать Телеграму про свой сайт. Но проблема в том, что я не знаю, как ему рассказать. У них там целая страница, где суперподробно расписан сам язык; есть штука, где можно протестировать шаблон для своего сайта; убедиться, что он работает. Я когда-то добился там, что всё заработало в их проверялке.
Но что с этим дальше делать — неизвестно. Нет кнопки «Использовать этот шаблон». Нет места, куда его вставить на своём сайте, чтобы Телеграм увидел. Нихрена понять нельзя; я когда-то на три раза прочитал всю документацию, не въехал и забил.
При этом в моём блоге это в какой-то момент заработало по неизвестным мне причинам. То ли нашёлся кто-то, кто разобрался и сделал. То ли тот шаблон, который я писал в их проверялке, как-то «активировался» через какое-то время. Но теперь я даже не знаю, где искать этот шаблон, чтобы его вам показать.
Поэтому если вдруг среди вас есть кто-то, кто в силах эту дичу понять, и может написать внятную инструкцию «Как поддержать Инстант-вью на своём сайте на Эгее», я с удовольствием дам ссылку или даже опубликую у себя.
Instant View Telegram – новый формат для просмотра ссылок
Instant View для Telegram — это инструмент предварительного просмотра предложенного ресурса. Он позволяет открыть страницу во встроенном браузере мессенджера, а не в штатном для устройства. Таким образом ваш читатель всегда останется на канале, а не уйдет изучать другой ресурс.
Как это работает
Мгновенный просмотр (Instant View) позволяет просмотреть содержимое ссылки сразу, без дополнительных загрузок и открытия лишних приложений. Помимо текста поддерживается и медийное содержимое. Сайт, на который вы ссылаетесь, может и не иметь мобильной версии. При этом читатель увидит именно ту информацию, которую вы хотите представить.
Линк с возможностью Instant View имеет внизу кнопку с изображением молнии и подписью «Посмотреть» или «View». Она добавляется, если для сайта был сделан шаблон быстрого просмотра. Его может создать автор канала или поста, а также разработчик сайта.
Что такое шаблон Instant View в Telegram
Шаблон – это набор правил и команд, которые указывают – какую информацию с исходной страницы следует выбирать. Бот Instant View следует этим инструкциям и с указанного сайта выбирает нужную информацию. Затем из нее формируется страница быстрого просмотра в Телеграмм.
Шаблон никак не связан с кодом сайта: при его построении последний не меняется. Здесь просто указываются теги, из которых надо брать данные, и правила, по которым следует это делать.
Как сделать Instant View в Телеграмме
Сначала следует остановиться на правилах построения шаблона Instant View. Их немного и полную информацию можно получить у официальных разработчиков сервиса.
https://instantview.telegram.org/docs
Самой главной единицей API Instant View для Телеграмм являются свойства. Вы должны указать как минимум title и body. Содержимое этих разделов берется с исходной страницы. Для каждого из них вы должны вписать html-тег. Уточнять можно, добавляя его класс или ID. Например:
# В теге article должен присутствовать заголовок H1. Его содержимое и будет выведено как заголовок быстрого просмотра
title: //article//h1
# Заголовком будет содержимое тега DIV с атрибутом > title: //div[@id=»title»]
#Тело – текст в теге div с классом subtitle
body: //div[has-class(«subtitle»)]
Можно указывать и текстовую информацию:
author: «Иванов Иван»
Убрать лишние теги можно с помощью команды @remove:
@remove: //div[has-class(«also»)]
В данном примере удаляются все теги div, у которых атрибут class имеет значение «also».
С помощью команды append можно добавлять другое содержимое, например, картинки.
Рассмотрим пошагово:
- Зайдите на сайт и нажмите на кнопку «My templates».
https://instantview.telegram.org/
- Авторизуйтесь. У вас должен быть аккаунт в Телеграмм, подтверждение входа осуществляется через него.
- Укажите URL-адрес любой статьи, для которой нужен Instant View.
- Откроется страница с тремя горизонтальными окнами. В первом показан оригинал. Во втором будем указывать правила. В третьем увидим предпросмотр.
- Чтобы вводить правила, вы должны разбираться в HTML-коде сайта, для которого создаете шаблон.
- Для удобства откройте страницу в браузере и нажмите на ней правую кнопку мыши. Выберите «Просмотреть код». После этого рядом будет открыт фрейм, в котором отобразится исходный код документа. Наводите на любой блок страницы, и его теги будут подсвечиваться. Таким образом вы сможете увидеть все необходимое для построения правил.
- Введите правила в среднее окно.
- В правом сразу же отобразится превью для Telegram, корректируйте правила для достижения желаемого результата программу.
- После создания нажмите кнопку «View in Telegram» (сверху справа), выберите получателя ссылки, и вы получите линк на ваш шаблон.
Такая ссылка работает только для ваших постов. Если вы разработчик сайта и хотите привязать к нему шаблон для любых постов сторонних авторов Телеграмм, следует пройти модерацию у администрации Телеграмм. В настоящее время они проводят конкурс. Всем желающим предлагается список сайтов, для которых нужны шаблоны. Поэтому неизвестно, как долго придется ждать решения, если ваш сайт не входит в этот список.