Как создать шаблон в телеграмм

Что такое Instant view в Telegram?

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

Instant view

Что такое Instant view?

Опция моментального просмотра позволяет открывать веб-страницы прямо в Telegram. Это позволяет сэкономить время на открытии стороннего браузера, отключает все рекламные объявления на странице и защищает пользователей от любых угроз, которые могут находится на открываемом сайте.

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

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 для блога за 5 минут

Функция Telegram Instant View позволяет внутри мессенджера создавать унифицированный вид статьи любого ресурса (примерно так, как если бы вы читали электронную книгу в своём ридере), который описан в правилах создания быстрых просмотров его страниц. Когда вы получаете или публикуете в каналы ссылку на такую статью через Telegram, для её просмотра требуется просто нажмите кнопку «Instant View» (далее по тексту – «быстрый просмотр») , и страница открывается мгновенно.

Ещё одной интересной особенностью функции «Быстрый просмотр» является то, что подготовленный вид статьи (поста) кешируется на серверах Telegram, и, даже при недоступности основного ресурса, где опубликована статья, ваши читатели смогут беспрепятственно его прочесть.

Отступление: для быстрой организации функции «Быстрый просмотр» без особой подготовки можно воспользоваться републикацией своего текста на любом из ресурсов, для которого она уже описана в Telegram. Например, если разместить ваш текст на сайте https://telegra.ph, то при публикации такой ссылки в мессенджере для неё автоматически создаётся Instant View. Для указания вашего авторства на стороннем ресурсе можно указать имя автора и ссылку на оригинальный материал. Вполне возможно, что этих мер будет вполне достаточно для удовлетворения ваших потребностей. Однако, если лёгкие пути – это не про вас, то читаем дальше.

Создание «быстрого просмотра» для своего блога возможно двумя способами:

1. Ручной способ – каждую отдельную статью придётся добавлять в личном кабинете, генерировать для неё уникальную ссылку и вставлять в пост.
2. Автоматизированный способ – любая добавленная ссылка на пост вашего блога (статью вашего сайта) в любом сообщении мессенджера автоматически преобразуется в «Instant View».

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

Для работы автоматизированного способа придётся получить одобрение от команды разработчиков. Для этого правила обработки страниц сайта должны соответствовать набору опредлённых требований, поскольку добавление быстрого просмотра страниц вашего блога (сайта) будет доступно всем пользователям Telegram, в него могут попасть даже не оптимизированные страницы, или страницы, для которых правила описаны не полностью, и страницы будут обрабатываться с ошибками, что недопустимо.

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

Простой пример добавления страницы в Instant View Telegram

Заходим на сайт Instant View и представляемся системе при помощи учётной записи Telegram.

Затем в данной форме вводим url нашего сайта:

Когда в списке ниже появится ваш домен, кликаем его и переходим к редактору шаблонов Instant View.

Обычно быстрый просмотр не требуется для главной страницы блога, да и к тому же вначале вы будете делать подобное действие для каждой конкретной страницы, поэтому в поле адреса нужно ввести url интересующей вас записи.

Открываем запись вашего блога, которую нужно опубликовать в instant view, в браузере в режиме просмотра исходного кода или инспектирования элементов. Находим заголовок и текст статьи. Смотрим какими стилями обёрнуты интересующие нас части страницы, которые мы хотим выводить в быстром просмотре.

В моём случае html код записи выглядит так:

Для удобства работы с шаблоном предлагаю за основу брать теги стилей (div class). Конечно, правилами можно выводить содержание между любыми html тегами, но проще всего использовать стили.

Как вы можете видеть, в записях моего блога название записи обёрнуто тегом <h1> c классом entry-title , а текст записи обёрнут классом entry-content . При этом, для нас не имеет никакого смысла показывать в instant view количество просмотров записи на самом сайте, поэтому текст, обёрнутый классом post-views мы исключим из отображения в правилах.

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

title: //div[has-class(«entry-title»)]//h1
body: //div[has-class(«entry-content»)]
@remove: //div[has-class(«post-views»)]

Превью ссылки (обратите внимание, что это ссылка не на страницу на домене блога, а на кеш в instant view) сообщения мессенджера с данным набором правил выглядит так:

Содержимое станицы, которая генерируется в результате данного набора правил, выглядит вот так:

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

О сложных шаблонах страниц Instant View

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

Ознакомиться с синтаксисом языка правил Instant View Telegram можно здесь.

В следующем посте на тему 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 View in Telegram: что это и как работает

Как пользоваться

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

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

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

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

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

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

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

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

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

Шаблон

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

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

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

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

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

«Тело» задается также тегом 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. Откроется новая вкладка с разными окнами: оригинал страницы, правила и предпросмотр.

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

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

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

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

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

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

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

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

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

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