Instant view telegram как сделать

Instant view в Telegram

Как уже описывалось выше, 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$.
Если вы не умеете создавать шаблоны, то вы всё равно можете получить вознаграждение. Для этого достаточно просто искать и отмечать ошибки, которые допустили разработчики шаблонов.

Instant Views Explained

Instant View allows Telegram users to view articles from around the Web in a consistent way, with zero loading time. When you get a link to an article via Telegram, simply tap the Instant View button, and the page will open instantly.

With Instant View, Telegram users can enjoy articles from any mass media or blogs in a uniform and easily readable way. Instant View pages support text and media of any type and work great even if the original website was not optimized for mobile devices.

On top of this, Instant View pages are extremely lightweight and are cached on the Telegram servers, so they load instantly on pretty much any connection — hence the name. No more waiting for clunky websites to load, now you can get the good stuff right away!

And the best part is that webmasters don't need to change anything on their websites for Instant Views to work.

Instant View Button

Instant View Page

How does this work?

When you share a link via Telegram and a link preview is generated, our Instant View bot also checks if it has an Instant View Template for that website. Templates are sets of instructions we call rules that teach the IV bot to build instant view pages for particular domains or URLs.

If a template exists for the link, the bot uses it to find the relevant content on the page (headings, text, media, embedded elements), remove clutter, and create a slim and beautiful Instant View page.

Anyone can use our Instant View Editor to create templates. Once a template for a URL is approved by our team, all Telegram users will get the option to view the page in the Instant View format whenever they see a link to it on Telegram.

If you publish your content on Telegram yourself, you don‘t even need to wait for us to approve your template. You can just send specially formatted links to your subscribers, and they’ll get Instant View pages built using your template right away.

Join buttons

Another added bonus if you have a channel is that you can direct users to join your channel from the Instant View pages built from your articles.

For this to work, the template must contain a channel property that holds a link to your channel. More in the docs »

Instant View Editor

Telegram's Instant View Editor allows you to create and test templates for any domain. To begin, just go to My Templates, type a target URL for your Instant View template into the box, and hit ‘enter’. This will open the editor. The source page will be displayed on the left.

Tip: Use the Developer Tools in your browser (e.g. Inspect mode in Chrome) to study the HTML markup of the page.

The middle section of the page is where you create your template for the chosen domain name or URL. Templates consist of simple instructions to our IV bot we call rules. You can later study the syntax in detail here. Once you've saved your rules for the page ( cmd + S or ctrl + S in the Rules window), the window on the right will display the Instant View page that the IV bot would create based on the current instructions.

Note the status line at the bottom of the page — it displays the result of the last operation. This is also where you'll find the output of the @debug function:

Sample templates

If you'd like an example, you can check out the exact same templates that we're currently using to generate Instant View pages for posts on Medium, Telegra.ph, and the Telegram Blog. We've added many comments to these templates, so they literally speak for themselves.

Feel free to experiment with them and see what changes. Don‘t worry, your changes won’t be applied to the actual Instant View pages that regular Telegram users can see.

Templates tutorial

When creating an Instant View template, you have four main objectives:

• Instant View pages must only be generated for pages that need them.
• All essential content from the source page must be represented.
• All unnecessary elements must be eliminated from the Instant View page.
• Your template must work well with any of the pages it covers.

Accordingly, one of the ways to create a template is to follow these steps:

Step 1. Aim your template

Instant View pages work best with relatively static articles. On the other hand, the main page of a news site that contains ever-changing lists of links to new articles would hardly benefit from the IV treatment.

For the first step, you will likely use conditions to clearly define which parts of the target website will and will not be covered by your template.

Step 2. Grab the essentials

Now it's time to do some real business. An Instant View page requires at least two properties to be created: a title and a body. Take a close look at the target article and make sure that all important elements are carried over to the IV page in a format supported by the Telegram apps.

At this stage, you may need to use functions to transform some elements before they are transferred. By the time you're done, your IV page should show the entire text of the article, along with all the headings and subheadings, quotes, cover and other photos, videos, and other kinds of embedded content from the source page.

Step 3. Remove the rest

Salvage the remaining useful bits, then use the @remove function to drop the rest. By now you should have a clean and slim IV page that displays the pure content and none of the fluff.

Step 4. Refine your template

At this stage, we advise you to leave the familiar confines of the page you were using for testing and check out different pages from your target website. See if any pages that don't deserve IVs are getting them — and whether IV pages are missing for any that do deserve them.

Also, check whether pages with irregular elements are processed correctly. Pay special attention to ensure that various types of media, embedded content, quotes, and separators are all displayed nicely. Check 5-10 different links and make the relevant adjustments.

Naturally, this is just a brief outline of what you could do — Instant View pages offer limitless possibilities.

Tracking changes

Once you're satisfied with your template's generated IV pages, press the Track Changes button. If modified template rules are subsequently applied, they can now be checked across all applicable IV pages within the system.

After Track Changes is enabled, editing your template will not immediately check for changes across all pages. Instead, when you're happy with the currently generated IV page, and no warnings are shown, click Mark as Checked to see if your changes broke anything on the other IV pages impacted by your template.

If any changes are detected, the status line will display the difference and the result:

Take care that your changes don‘t break pages that already had good IV pages. There’s a handy indicator at the top of the page that shows the status of the pages relevant for your template. As long as it's green, everything's fine.

Publishing templates

If the Instant View page has been processed successfully, you'll see a View in Telegram button in the top right corner – you can use it to view the resulting page in-app.

For your own audience

Note that if you send the resulting t.me/iv?url=. &rhash=. link to other Telegram users, they will see an Instant View page built using your template (the rhash parameter in the link determines which template is used to create the page). This means that, as a website owner, you can create a template for your page and publish t.me/iv?url=. links with the corresponding rhash to your Telegram channel — and your subscribers will be able to view your articles in the Instant View format right away.

For all Telegram users

If you'd like your template to become truly public and seen by all users, regardless of the link they get, the template will need to be approved by the Telegram team.

And that‘s it, you’re now ready to move on to the full instant view documentation.
Don't forget that you can also check out our annotated sample templates.

Log In

Log in here to create Instant View templates. Please enter your phone number in the international format and we will send a confirmation message to your account via Telegram.

We've just sent you a message.
Please confirm access via Telegram

Instant View для Telegram в WordPress

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

Сразу делаю оговорку, что для автоматического размещения постов в социальные сети, в том числе telegram-каналы — использую плагин NextScripts: Social Networks Auto-Poster. Это сильно упрощает задачу по репосту и планированию постинга в социальных сетях. Рекомендую.

Давайте вернемся к Instant View. В первую очередь — что же такое Instant View? Это технология быстрого просмотра статьи прямо в telegram. Подобные страницы избавлены от лишнего контента и кешируются самим телеграмом, поэтому открываются прямо на лету — что очень удобно как для глаз так и с точки зрения пользовательского опыта. Характерны такие посты синей кнопкой с молнией:

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

1. Вход в центр управления шаблонами Instant View. Переходим на сайт https://instantview.telegram.org и справа видим ссылку «My templates», по клику на нее входим через свой telegram-аккаунт. На открывшейся странице вводим адрес статьи на Вашем блоге, на примере которой хотите создать свой Instant View. Рекомендую выбирать статью, в которой есть максимальное количество элементов ,которые можете использовать: картинки, видео, аудиофайлы и т.д.:

Нажимаем Enter и видим три окна — статья как она выглядит в браузере, правила для обработки Instant View и предварительный просмотр готового Instant View.

1. Поиск нужных тегов в статье. Далее, начинается самое сложное для неискушенного пользователя. Но не волнуйтесь — если у Вас не будет получаться — в комментариях оставляйте свои ссылки на статьи, помогу создать нужный код. Итак, открываем предпросмотр кода в браузере (меню левой кнопки мыши) и находим теги, которые отвечают за вывод статьи. Для примера у меня это <article >

Чтобы понять какой у вас тег отвечает за вывод статьи — наводите и открывайте гармошку кода до тех пор, пока не найдете нужный. Таким же образом находим теги для заголовка статьи, картинки, описания, автора, даты публикации, подзаголовка. Для примера, вот мои теги:

Заголовок статьи — <h1 >

Дата публикации — <time >

Подзаголовок (у меня это количество времени на прочтение статьи) — <span >

Картинка поста — <img class=»featured-image img-fluid wp-post-image»>

Тело статьи — <article >

Автор статьи — <a >

Можете открыть код этой статьи и изучить его, чтобы понимали о чем речь.

1. Написание кода обработки Instant View. Подробная документация находится здесь (на английском): https://instantview.telegram.org/docs
   • Первым делом выводим картинку поста кодом: cover: //img[has-class(«featured-image img-fluid wp-post-image»)] в данном куске кода видим, что присутствует тег img и его класс featured-image img-fluid wp-post-image — именно таким образом у меня выводится картинка.
   • Следующая строка — заголовок: title: //h1[has-class(«posttitle»)] Опять видим тег h1 и его класс posttitle — смотрите выше, у меня на блоге таким блоком выводится заголовок. И так далее..
   • Подзаголовок: subtitle: //span[has-class(«readingtime»)]
   • Автор статьи: author: //a[has-class(«text-capitalize link-dark»)] . Если оставить код в таком виде, то после имени автора зацепает и слово «Follow». Чтобы убрать любой кусок страницы с нашего Instant View используем функцию remove: @remove: //span[has-class(«btn follow»)]
   • Делаем автора статьи кликабельным (можно добавить любой адрес): author_url: «https://poltavcev.biz»
   • Дата публикации статьи: published_date: //time[has-class(«post-date»)]
   • И, наконец, сама статья: body: //article[has-class(«article-post»)]
2. Проверка как выглядит в telegram. Теперь можно нажать вверху справа на ссылку «Mark as checked» и после этого отправить в телеграм ссылкой «View in Telegram«. Если Вы подобрали правильно теги и классы, то все должно работать.
3. Добавляем ссылку на канал. Чтобы под изображением или в шапке появилась ссылка на ваш телеграм-канал — необходимо прописать тег channel в котором указать логин нужного канала: channel: «@poltavcev»
4. Ограничиваем папку статей. Чтобы Instant View генерировался только для постов — добавляем папку/слуг по которому находятся Ваши посты через функцию path: ?path: /blog/.* Если в WordPress у Вас не задан подобный слуг, сделать это можно задав произвольную маску в настройках постоянных ссылок:
5. Публикация шаблона. После того, как шаблон готов и протестирован — необходимо отправить его на публикацию. Только после проверки все ваши ссылки будут автоматически подхватываться telegram и на основании шаблона генерироваться Instant View. Для отправки на публикацию — добавьте несколько страниц со своего блога — на сегодняшний день это 10. После того, как необходимое количество ссылок будет добавлено, на данной странице станет активна ссылка «Submit template». Нажимаем и ждем публикации. Также, можете добавить ссылку на любую статью с вашего сайта: здесь >>>нажав на кнопку «Add domain»

Вот полный пример обработчика для моего блога:

cover: //img[has-class(«featured-image img-fluid wp-post-image»)]
title: //h1[has-class(«posttitle»)]
subtitle: //span[has-class(«readingtime»)]
author: //a[has-class(«text-capitalize link-dark»)]
author_url: «https://poltavcev.biz»
@remove: //span[has-class(«btn follow»)]
published_date: //time[has-class(«post-date»)]
body: //article[has-class(«article-post»)]
?path: /blog/.*
channel: «@poltavcev»

1. Как использовать пока не опубликовали шаблон. Пока я не знаю насколько быстро публикуют шаблоны и вообще публикуют ли… По результату модерации — отпишусь здесь. Но есть возможность, вполне легально, использовать данный шаблон без одобрения (данная возможность описана в документации telegram). При нажатии на «View in Telegram» Вы получаете специальную ссылку, которая без перекодировки выглядит так: https://t.me/iv?url= ССЫЛКА НА ВАШУ СТАТЬЮ &rhash= УНИКАЛЬНЫЙ ХЕШ ШАБЛОНА. Можно подставить данную ссылку боту @ControllerBot и спрятать некрасивую ссылку за точкой. Но я выбрал отправку на полном автомате через NextScripts: Social Networks Auto-Poster. Вот формат сообщения, который я использую для себя:

%TITLE%
%HTAGS%
%HCATS%
%EXCERPT%
<a href=»https://t.me/iv?url=%URL%&rhash=731cd3d47acb43″>.</a>

На сегодня все ) Обязательно задавайте свои вопросы в комментариях и подписывайтесь на мой канал в telegram >>

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

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 с атрибутом /> title: //div[@id=»title»]
   #Тело – текст в теге div с классом subtitle
   body: //div[has-class(«subtitle»)]
   Можно указывать и текстовую информацию:
   author: «Иванов Иван»
   Убрать лишние теги можно с помощью команды @remove:
   @remove: //div[has-class(«also»)] Для ознакомления всё будет выведено в окно предпросмотра. Если всё устраивает, то нажимаем на «View in Telegram» и отправляем ссылку в телеграмм.

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

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