Тему настройки Instant View Telgram для сайта на WordPress я уже поднимал. Тогда показал реализацию которая хоть как-то работала. На этом вся польза от предложенного варианта заканчивалась, но альтернатив я не знал, а запросы в поиск показывали фигу.
Отсутствие выбора, ограниченность бесплатного тарифа wordpress.com, привязка к их площадке, платный тариф сопоставимый по стоимости с Битриксом — намекают, что решение не более чем «костыль» призванный закрыть издержки отсутствия хоть какой-нибудь вменяемой инструкции на русском.
Тем временем, вопросы боту Кладовой на тему полноценной связки сайта с Инстантвью Телеграм не утихали. Пришлось вернуться к реализации работы технологии, задуманной Дуровым. Как оказалось, быстрой, простой и без ограничений. Всё как вы любите. Обидно, что всё это время я просто не обращал на неё внимания проходя мимо.
Документация Инстанта на официальном сайте— первая ссылка, которую выдаёт поиск (Instant View Telegram). В официальном блоге Телеграм, посмотрев на многостраничный гайд по пользованию разметкой на английском, желание разбираться самому пропадает. Но я обещал не отказывать в помощи читателям, поэтому вперёд. Начинаем поиск решения с начала.
Telegram: Instant View
Вводные данные
Имеем технологию мессенджера, которая незаменима для авторов. Сайт, не обязательно на Вордпресс, и документация на английском.
На выходе желаем получить заветную кнопку Instant View при публикации любой ссылки в Телеграм. В прошлый раз я неверно определил задачу и полез в админку CMS. А задача сводится всего лишь к разработке индивидуального шаблона (template) для нужного сайта.
Руководство
Документация предлагает разбить работу с шаблоном на четыре шага. Бегло просмотрев текст, может показаться, что разберётся только программист, но это не так.
Изменения шаблонов производятся в новом интерфейсе, который представлен тут же, на официальном сайте проекта. Ищем список ссылок справа, видим «Мои шаблоны» и переходим. Или по ссылке https://instantview.telegram.org/my/
После авторизации, просто скопируйте ссылку ссылку на статью или карточку товара и вставьте в пустое поле.
Слева (1) — текущий вид страницы, ссылку на ней мы только что вставили.
В центре (2) — шаблон для быстрого просмотра.
Справа (3) — отображение в мессенджере, учитывая контент и шаблон.
Дальше пошагово
1. Сайт
Ремарка, которую стоит отметить отдельно — настройка редактируемой страницы сайта, для которого создаём шаблон, должна быть завершена. Элементы, которые будут отображены в результате, после начала работы лучше не менять (меню, сайдбары, кнопки репоста, форма или что-то ещё).
Шаг можно считать нулевым — фактически настройка шаблона чаще всего уже произведена на этапе сборки сайта. Лучше всего мгновенный просмотр страниц в телеграм работает с статическим контентом, анимация, в первый раз может вызвать сложности.
Настройка Instant View в Telegram для своего сайта
Редактирование элемента странице сайта или в шаблоне редакторе шаблонов команды Телеграм, меняет параметры отображения в Instant View.
Также, назначайте уникальный айди (id) и клас (class) для каждого элемента отдельно.
2.Ваш шаблон Instant View
Прелесть редактора в том, что изменения, которые придётся внести, минимальны — обязательны только два параметра: тайтл (Title) и боди (Body) они помогают ориентироваться телеграм-боту, который будет анализировать содержимое. Первый идентификатор метит заголовок страницы, второй метит контент.
Узнать идентификатор элемента можно стандартной опцией браузера — Посмотреть код страницы. Не нашли — поставьте Хром и нажмите правой кнопкой мыши на любом содержимом.
Например, классы элемента div class и div id в коде страницы:
Любой сайт? — Любой!
Например, возьмём Avito — шаблоном разработчики пока не озадачились.
Открываем → Комипуем → Авторизуемся → Ищем → Копируем → Вставляем
body: //div[has-class(«item-view-content»)] title: //h1[has-class(«title-info-title»)]
Полный список команд и примеров на официальной странице команды Телеграм (https://instantview.telegram.org/docs)
Если body и title добавлены, а мгновенный просмотр не работает, обязательно выполните пункт три.
3. Не работает — чистим
Неподдерживаемые элементы, лишнюю информацию, старые куски кода в шаблоне надо найти и удалить.
Без паники, не пытаемся идти в корень сайта — всё меняем в редакторе.
Например:
Смотрим и чистим, нашли, удалили (iframe) — всё заработало.
4. Переменные и сборка
Приведу основные переменные. Для быстрой реализации их достаточно. Метим нужное содержимое и радуемся.
Полный список – в документации (https://instantview.telegram.org/docs).
?path: / – помечает страницы к которым применять шаблон.
subtitle – подзаголовок
author – автор
author_url – ссылка на автора
published_date – время публикации
description – описание
image_url – изображение
document_url – документ, превью ссылки
channel – ссылка на канал в Телеграм
cover – аудио и видео содержимое (фото, видео, аудио).
background_to_image – задать фоновое изображение.
5. Публикация и отображения
Для публикации нажимаем «View in Telegram»
На этом этапе получим такую ссылку:
https://t.me/iv?url=https://spark.ru/startup/kldv404/blog/33277/telegram-instant-view-dlya-kazhdogo-sajta-5-minut-0-slozhnostej-i-ogranichenij» target=»_blank»]spark.ru[/mask_link]
Instant view в Telegram
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$.
Если вы не умеете создавать шаблоны, то вы всё равно можете получить вознаграждение. Для этого достаточно просто искать и отмечать ошибки, которые допустили разработчики шаблонов.Источник: tgrm.su
Instant View — бессмысленный и беспощадный
С 2017 года в Telegram появилась технология Instant View. Она позволяет быстро открывать странички сайтов в мобильном приложении.
Такого рода технологии разрабатывались изначально различными социальными сетями. Владельцы сайтов (не всех) таким положением дел недовольны. Выигрыш получает не автор контента, а владелец приложения (в данном случае Telegram) и пользователь этого приложения. Дело в том, что боты, подгружающие контент, берут только нужную часть странички.
Владельцы сайтов недополучают трафик, пользователь не видит рекламу владельца. А может и видит, как в Турбо-страницах Яндекса, но только рекламу самого Яндекса.
В общем, все, кто зарабатывает на рекламе, не заинтересованы в технологии Instant View. Разработчики Telegram это понимают, поэтому шаблоны Instant View можно делать для любых сайтов, каких захочется. Владельцем сайта для этого быть совсем не нужно. Вот только какой именно шаблон будет применяться, решают владельцы Telegram.
Допустим, вы — владелец сайта. Вот такой как я. И вы совсем не жадный до копеек с рекламы, которая не окупает даже стоимость домена, как у меня. И вы хотите, чтобы ссылки на ваш сайт выглядели красиво: с большой картинкой, с большой кнопкой ПОСМОТРЕТЬ, как хочу я. И чтобы контент открывался быстро, всё для пользователя, всё для популяризации IT, бесплатно, как хочется мне. И вы можете за пять минут написать сами специальный шаблон Instant View для своего сайта, но вот модерацию он будет проходить годами, особенно если ваш сайт маленький и не интересный владельцам Telegram.
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.
Ну, подождём. Вдруг прокатит. Тем более, что есть обходной путь. Ссылки на свои статьи можно публиковать через сторонние ресурсы, например, через t.me.
Краткая инструкция по созданию шаблона Instant View
Логинимся под своей учёткой Telegram:
Переходим на страничку своих шаблонов My Templates. И создаём шаблон для своего сайта. Или не для своего.
Тыкаем в домен и переходим к редактору шаблонов Instant View. Указываем ссылку на статью.
- На левом экране ваша статья. Если вы измените её, то сбросить кэш поможет кнопка Reload.
- В центре код шаблона. Он выбирает из вашей статьи данные с помощью XPath. Нужно будет покодить.
- Справа результат.
XPath (XML Path Language) — язык запросов к элементам XML-документа. И к элементам HTML-документа тоже.
Instant View использует расширенный XPath, документация доступна по ссылке:
MARK AS CHECKED — отмечает ссылку как проверенную
VIIEW IN TELEGRAM — позволяет сгенерировать ссылку на статью через t.me. Вот эту ссылку можно публиковать в Telegram и статья будет открываться по технологии Instant View. Есть ещё куча разных ботов, которые скрывают это ссылку под видом точки или пробела, но это уже тонкости оптимизации.
Если проверить больше десяти ссылок, то шаблон можно направить на модерацию. Если шаблон каким-то немыслимым чудесным и волшебным образом эту модерацию пройдёт, то все ваши ссылки в Telegram станут отображаться через Instant View, пока вы код страниц сайта не измените. После изменения кода страниц шаблон нужно допиливать и снова отправлять на модерацию.
Источник: internet-lab.ru
