Как убрать ссылку вверху на instantview telegram

Корпорация "Центр"

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

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

Instant viewInstant view

Что такое Instant view?

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

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

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. Все текстовые, графические и видео материалы взяты из окрытых источников и носят ознакомительный характер. В случае возникновения споров, претензий, нарушений авторских или имущественных прав, просьба связаться с администрацией сайта.

Подключил Telegram Instant View

Telegram Instant View official image

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

Но все оказалось намного интереснее — на стороне подключаемого сайта не нужно вносить никаких изменений. Нужно зайти на https://instantview.telegram.org/, залогиниться и настроить шаблон для отображения.

Порядок действий

  1. Логинимся на сайте
  2. Идем в My Templates
  3. Добавляем URL своего сайта и в конструкторе шаблонов описываем каким образом получать контент из разметки вашего сайта.

Telegram Instant View interface

Telegram Instant View interface

Тут на картинке отметил:

  1. Код шаблона
  2. Дополнительный код шаблона который уже любезно сгенерирован сервисом. Там правила для обработки виджетов твиттера, ютуба и прочего
  3. Кнопка сохраняющая шаблон

В самом простом случае необходимо лишь указать XPath элемента который содержит основной контент и все заработает. Но если покопаться в документации то можно обнаружить очень развесистый функционал.

Я же решил пойти по самому простому пути — просто добавил минимальные данные в шаблоне и сохранил его.

Мой код шаблона Instant View:

Проблема с URL

Вместе с тем здесь есть ложка дегтя — для того чтобы заветная кнопка “Instant View” отобразилось под ссылкой на страницу вашего сайта в Telegram необходимо публиковать ссылку вида — https://t.me/iv?url=https://hmdw.me/restrictions-32/&rhash=5e444ccc0e7e41 где в параметре url ссылка на страницу, а в параметре rhash идентификатор созданного шаблона.

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

Для того чтобы ссылки были красивыми можно провернуть небольшой трюк с отправкой двух url в посте. Первым должен идти некрасивый URL от Telegram. Для облегчения этой задачи добрыми людьми был написан бот https://t.me/InsViBot. Более подробно о проблеме и ее решении можно почитать на Хабре.

Я же пока обнаружил только один косяк — если копировать ссылку из ответа бота то она неправильно подсвечивается:

Telegram IV link

Пока исправляю это вручную дописывая “https” перед : и удаляя затем прежний тест “https” при вставке ссылки. В таком случае обе ссылки сохраняются и все правильно подсвечивается.

Telegram IV view

Проблема остается только конкретно с моим сайтом — в IV дублируется заголовок. Пока не знаю как это починить.

Instant View in Action

Полное руководство по созданию Telegram Instant View на примере i-osipov.ru

Telegram идет большими шагами по планете и масштабы постоянно растут. Многие из нас часто читают статьи на каналах, нажимают кнопку Instant View и вот, статья уже перед нами, но как это получилось? Instant View работает по первой ссылке, но почему не по каждой? Сегодня мы с вами разберемся как взять свой сайт и адаптировать Instant View к нему. Действовать мы будем на примере i-osipov.ru.

С чем мы имеем дело

Под капотом у i-osipov.ru находится hugo, hugo это генератор статического контента. Для понимания, когда я пишу пост — у меня есть отдельный проект на диске в котором есть предопределенные директории. В директориях лежит контент, например, в content/post/* находятся все посты на сайте, а при выполнении команды hugo в терминале стоя в корневой папке у меня генерируется статика, html + css + js, используется преднастроенная тема, в итоге статика выгружается в GitHub репозиторий, публикуется с помощью GitHub Pages, а i-osipov.ru лишь альтернативное имя, через которое доступен контент.

Как вы можете догадаться, формат статики определяю не я, определяет hugo. Теперь передо мной стоит задача разобраться в этом формате и научить Telegram генерировать Instant View для моего сайта. Прежде всего, источниом информации по этому вопросу для меня является instantview.telegram.org. С этой страницы мы узнаем о том, что Instant View (IV) — это механизм позволяющий открывать ваши ссылки прямо в телеграм, это отличный user friendly способ подать ваш контент, ваш сайт может быть не оптимизирован для мобильных устройств (это нас не так волнует, т.к. у hugo с этим почти всё в порядке), а слово Instant означает мгновенную загрузку и кеширование на серверах телеграмма.

Как работает Instant View

Втавка ссылки на внешний контент в текстовое поле влечет за собой цепочку событий: генерируется link preview — это короткая инфрмация о том какой контент доступен по ссылке, специальный Instant View Bot проверяет, есть ли шаблон IV для указанного сайта. После публикации шаблона он становится доступен всем пользователям Telegram. До процесса глобальной публикации вы можете давать ссылку читателям без процесса публикации и подтверждения, но об этом в разделе Публикация.

Создание Instant View

Редактор Instant View

С этого момента начинается процесс разработки, так что если у вас есть к чему прикрутить IV, то самое время взять ноутбук и приготовится.

Все манипуляции вашими IV происходят на странице instantview.telegram.org/my При первом входе вас попросят залогиниться через telegram. Далее вы даёте ссылку на любой контент (пост на котором мы будем отлаживать шаблон) на вашем сайте. Что именно вы выберете — не так важно, главное, чтобы верстка контента была примерно одинаковой. Я возьму один из последних постов. Редактор открылся, теперь мы видим следующую картину

InstantViewEditor

Перед нами 3 рабочих пространства. Слева мы видим подгруженную, словно с телефона, версию страницы блога, по центру расположилось поле для указания правил (это наше рабочее пространство), а справа мы видим результат — то, как примерно будет выглядеть IV. На скриншоте по центру по умолчанию пусто, но для полноты я вписал туда body: //article . Такая простая конфигурация говорит о том, что тело нашего Instant View будет парситься Instant View Bot’ом прямо из html тега под названием article (выбранного благодаря xpath). Это первое из двух обязательных полей для создания Instant View, дальше мы разберем правила, которые помогут сформировать качественное встроенное представление внутри Telegram из того контента, который доступен на странице. При необходимости, вы можете перезагрузить исходную страницу и сохранить ваши описанные правила с помощью ctrl + S или cmd + S .

В нижней части страницы располагается результат последней операции и вывод функции @debug на которую мы взглянем в разделе Дебаггер

С помощью символа # обозначается начало комментария, текст справа этого символа не интерпритируется.

Панель разработчика

Важнейший инструмент на этапе построения Instant View это Панель разработчика в вашем браузере. К примеру, в Google Chrome она открывается при нажатии F12 или Ctrl + Shift + I , либо поищите в меню Дополнительные инструменты — Инструменты разработчика.

Фильтрация контента

Помните, что Instant View предназначен для относительно стачесных статей, центральная страница динамичного сайта — плохой кандидат для IV. Следовательно и не каждая станица интересующего сайта нам подойдет. Часто, статьи обособляются html тегом <article> и это знак того, что на странице есть статья. Для того, чтобы по ошибке Instant View Bot не интерпретировал ссылки на другие страницы сайта как встроенные, нам необходимо добавить условия.

Условия

Условия начинаются либо с ? , либо с ! по следующему формату:

Если условия следуют друг за другом, то они интерпретируются как единый блок, где ? -правила это ИЛИ, а ! -правила это И. В блоке условий должно быть как минимум одно условие ИЛИ.

Несколько блоков условий выглядят следующим образом:

Конечно, кроме условия exists существуют и другие, ниже их полный список на текущий момент:

Для нашего примера я выбрал следующие условия:

Посты находятся всегда под i-osipov.ru/post/* и в каждом посте должен существовать тег article.

Свойства

Свойства содержат в себе значения и имеют следующий формат:

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

Корпорация "Центр"

Ранее, я упоминал о том, что есть два свойства, которые обязательно нужно определить. Мы уже познакомились со свойством body: //article , которое помогает Instant View Bot определить где же находится основной контент статьи. Второе, обязательное к определению свойство это title , например, правило title: //article//h1 выберет заголовок первого уровня внутри блока статьи и объяснит IV Bot’у, через свойство title, где же смотреть название статьи.

Рассмотрим другие свойства, которые нам доступны из коробки:

Для нашего примера, я обозначу следующие свойства

Наших текущих знаний хватает только на такие простые манипуляции, но даже их достаточно для минимального варианта. Для полноты картины пока “захардкодим” остальные интересующие нас значения, например, так:

В следующих разделах мы с вами перепишем этот хардкод, но пока так.

Результат таких манипуляций ниже на скриншоте редактора:

Instant View. Шаг 1

Типы данных

В главе выше мы затронули типы и прежде всего необходимо пояснить, что страница Instant View содержит разные типы. Каждый тип ассоциирован с html тегом, например, тип Header определяет объекты созданные на основе тегов <h1> — <h4> . У типов есть допустимые дочерние типы, по сути, это те, кто могут быть вложены внутрь. Благодаря типам, практически весь контент под тегом <article> может быть распознан без дополнительных усилий. Типы важная, но при этом довольно простая составляющая Instant View, по этому полный перечень с описанием доступен по ссылке.

На ваших страницах может быть представлен какой-либо код на опрежеденном языке, телеграм не поддерживает подстветку синтаксиса, но они планируют сделать это в будущем. По этой причине, для больших блоков кода обособленных в <pre> желательно указывать аттрибут data-language , как результат, подстветка кода в Instant View появится сама собой со временем.

Переменные

Концепция переменных знакома вам из любого языка программирования. Здесь основное предназначение переменных — гибкое манипулирование ими перед назначением их значений свойствам. Кратко, у нас есть идентификатор, который начинается с $ , например, $myvariable и есть значение. Идентификатор может быть только в нижнем регистре. Значение переменной может быть xpath или строка, в последнем случае переменная будет содержать список из одного текстового элемента в котором определен заданный в строке текст. Кроме того, вы можете назначить переменной null , что позволяет сбросить значение в ней. Вы можете свободно менять значение переменной, если же вы хотите назначить переменной значение только в том случае, если раньше никакое значение не было присвоено, то можно воспользоваться символом ? , написанным после идентификатора, вот так $myvariable? , в том месте, где происходит смена значений.

Резюмируя, мы можем менять значения переменных следующим образом:

Для того, чтобы объяснить вторую строчку и что же такое //img[@src] давайте поговорим о расширенном XPath.

Расширенный XPath

Прежде всего нужно сказать, что у нас есть чуть больше чем XPath для формирования выборки узлов html документа. Если вы пока не знакомы с XPath, то самое время это сделать. Начать можно отсюда. Кратко, XPath это язык, который позволяет навигироваться по XML. Нtml и Xml родственные форматы, по этому мы можем навигироваться и по Html. Взглянем на дополнительные возможности, которые дает нам расширенный XPath от Telegram.

Относительный XPath

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

Для навигации по такому дереву мы можем использовать стандартный XPath

Либо, так как мы изначально знаем о том, что поиск будет выполняться внутри узла article , то можем воспользоваться переменной и таким образом задать контекст:

Один узел вместо нескольких

Иногда, мы знаем, что XPath вернет нам несколько результатов, но мы хотим только первый, второй или любой другой из них. По умолчанию XPath возвращает список узлов, однако, для того, чтобы сузить область поиска мы можем явно выбрать один из полученных узлов с помощью выражения (xpath_query)[n] , здесь n — это порядковый номер узла в списке, полученном с помощью xpath_query . Нумерация начинается с 1, либо на месте n можно записать last() и тогда будет выбран последний элемент. Такой синтаксис поддерживается только для всего выражения целиком. Ниже несколько примеров:

Выбор по css классу

Отличный инструмент, который мы получили с расширенным XPath это выражение has-class("class") , которое позволяет выбирать узлы имеющие определенный класс. Это выражение — сокращение следующего contains(concat(" ", normalize-space(@class), " "), " class ")

Я покажу практическое применение инструмента на своём же блоге, для которого настраиваю Instant View. Ранее мы присвоили свойствам title и description следующие значения:

Но это не до конца верно, правильнее ограничить контекст поиска и мы можем это сделать. Все заголовки документа могут быть доступны только через div элемент с классом post-heading , зная это, мы можем воспользоваться has-class и получим следующее обновление для нашего шаблона.

Элемент одного уровня

XPath дает нам мощные возможности для поиска, но не всегда они легко читаемы, последние два улучшения — это сокрщенные формы стандарных XPath выражений. В стандартном XPath мы можем донянуться до предшествующего sibling узла (по русски это “элемент одного уровня”) следующим образом: preceding-sibling::*[1]/self , расширенный XPath дает нам сокращения в виде prev-sibling , можно сравнить в применении:

Для последующих элементов есть аналогичное выражение next-sibling , которое является сокращением following-sibling::*[1]/self .

Функции

Пожалуй важнейший и очень гибкий вид правил — функции. С их помощью вы сможете удалять ненужные элементы, производить трансформации одних элементов в другие и так далее. Функции начинаются с символа @ и есть несколько разных форматов их применения:

У функции определяется основной аргумент, например, xpath выражение или строка. Основной аргумент записывается справа от “:“. В случае строки в качестве аргумента, на самом деле, будет передан список с одним тектовым элементом, который содержит указанный текст.

Разберем пример. Внутри тега <article> , который содержит контент статьи, находится блок с комментариями, это встроенные Disqus комментарии. Однако, эти комментарии не поддерживаются в Instant View и нам необходимо их исключить. Для его мы воспользуемся функцией @remove .

Открыв консоль разработчика в Chrome и выбрав элемент, который я хочу удалить, я обнаружил, что в DOM дереве исходной страницы есть два элемента. Эта часть дерева выглядит примерно так:

Узел noscript довольно просто обнаружить и удалить. $body ниже это отсылка к телу статьи, к свойству body , которое мы проинициализировали в самом начале используя XPath //article .

Со ссылкой, следующей за узлом <noscript> всё не так очевидно, здесь мне помогла функция @debug , благодаря этой функции вы можете понять находит ли XPath желаемый элемент или нет. Применение выглядит следующим образом:

Результат применения вы увидите в самом низу страницы редактора. Здесь я могу применить расширенный XPath и сказать “Удали все узлы <a> перед которыми есть узел того же уровня <noscript> ”.

Успех? Нет! Оказывается, из-за того, что сначала мы удалили noscript, а затем опирались на него при поиске a, то интерпритатор в конце не нашел ни одного a у которого предшественник noscript. Понять это получилось опять же, благодаря функции @debug . В результате, поменяв местами вызовы функции @remove мы последовательно удалили оба не нужных элемента.

Также функции могут явно или неявно работать со специальными переменными.

Специальные переменные

Когда мы работаем с функцией у которой справа записан xpath, то мы можем на следующей строке получитьрезультат этого выражения не повторяя его. Этот результат хранится в переменной $$ , т.е. мы можем сделать, например, так

После чего внизу редактора увидим, какой же результат мы записали в description. Также каждая функция выполняет некую трансформацию, обрабатывает входящие элементы и получает какой-то результат. Собственно, сам результат можно получить из переменной $@ . Итак:

  • $$ — содержит результат самого последнего XPath выражения;
  • $@ — содержит значение возвращаемое последней запущенной функцией.

Другие функции

В конце этого руководства я приведу описание каждой из доступных функций, но для специфик применения, предлагаю обратиться к оригинальной документации по ссылкам. См. приложение А.

Используя изученные в приложении А функции мы можем, для начала, улучшить последний процесс удаления хвостов от disqus. Раньше мы удаляли хвосты так:

Теперь мы воспользуемся функцией @combine , которая склеивает заданные узлы в один <noscript> узел. А затем удалим результат склейки.

Нам осталось разобраться, как правильно обозначить автора, дату публикации и ссылку на картинку для превью.

Для получения картинки, воспользуемся функцией @background_to_image , она преобразует стиль в элемент <img> . Результат функции присвоим переменной $main_image , значение атрибутта src присвоим свойству image_url , а саму картинку добавим в начало статьи. Всё это делается следующим образом:

Инструменты разработчика Chrome подсказывают, что оставшаяся интересующая нас информация находится в той же части дерева элементов, что и заголовки для статей, по этому воспользуемся, уже определенным ранее $header . Нам осталось извлечь из дерева имя автора и дату публикации. Извлечение данных, я сделал следующим образом:

Встраиваемые элементы

В вашем случае могут быть медиа элементы, которые вы так же хотели бы встроить. Сегодня телеграм поддерживает следующие сервисы для встраивания в Instant View:

  • Youtube
  • Vimeo
  • Tweets & Twitter Videos
  • Facebook Posts & Videos
  • Instagram
  • Giphy
  • SoundCloud
  • GithubGist
  • Aparat
  • VK.com Videos

Включения (системные правила)

Включения — это системные правила и вам их нет необходимости использовать для собственных нужд, но знание того что это пригодится для понимания работы Telegram Instant View.

Я вижу один вариант использования. Это если ваш сайт на одном движке с кем-то, для кого уже есть готовые правила

Обработка страниц

Все страницы обрабатываются по следующим правилам:

Если же страница находится на поддомене, то она обрабатывается так:

Следовательно, сначала Instant View Bot ищет шаблон для полного домена и если он не находит проинициализированного свойства body, то понижает уровнь домена и ищет шаблон для него. Блок правил ..after выполняется для всех доменов.

Instant View для поддоменов

Если страница обрабатывается для поддомена, то необходимо вручную выбрать уровень домена, который необходим в левом верхнем углу редактора.

Публикация

Для того, чтобы посмотреть результат нажмите на кнопку View In Telegram и если у вас есть десктопное приложение, то в нем вам предложат отправить кому-нибудь ссылку, которая будет открывать ваш тестовый пример через Instant View.

Публикация для всех пользователей Telegram происходит только после подтверждения вашего шаблона командой Telegram. До этого момента вы можете распространять ссылки с истользованием шаблона, даже без подтверждения. Для этого вам нужно составить ссылку в формате: t.me/iv?url=. &rhash=. , где url это ссылка на публикацию, а rhash — идентификатор шаблона.

Бонус. Instant View и Cloudflare

В своих прошлых статьях, я рассказывал о том, что в качестве DNS серверов для i-osipov.ru используются DNS сервера Cloudflare. Кроме того, Cloudflare это прокси защищающий от DDOS и при реализации Instant View я заметил одну небольшую особенность. Из коробки этот замечательный сервис предоставляет услугу, которая называется ‘Email protection’, по сути в определенном наборе ситуаций, которые можно детектировать как “бот, который обходит интернет и собирает email’ы для спама”, Cloudflare заменят все email’ы обсусцирует email’ы на странице. Instant View Bot такой же подозрительный тип, но всё ради безопасности. Тем ни менее, в статье про то “как написать бота для телеграма” есть полная форма команды оправляемая телеграм боту, напомню что выглядит она вот так: /command@BotName . Проблема в том, что cloudflare распознает как email всё что справа от слеша и отдает неправильную страничку боту. Как это исправить? Все подробности есть здесь, если коротко, то вы должны встроить в код страницы тег <!—email_off—> здесь cloudflare не будет защищать email’ы <!—/email_off—> . Да, вы правильно поняли, для того, чтобы показать вам команду для бота и в этой статье, мне пришлось снова встроить комментарии отключающие cloudflare email protection.

Шаблон для i-osipov.ru

В итоге, мы получили следующий шаблон:

На самом деле в шаблон входит еще и обнотка неподдерживаемых таблиц, вместо них можно отображать ссылку на сайт с полным контентом. Как это сделать вы можете подглядеть в публичком шаблоне для i-osipov.ru или поразмышлять самостоятельно.

Заключение

Telegram Instant View это мощный инструмент, который поможет вам интегрировать ваш контент в инфраструктуру Telegram. Относиться к Instant View можно по разному, но на мой взгляд, если вы можете сделать жизнь вашего читателя еще лучше — сделайте это. Со своей стороны, я надеюсь, что этот документ поможет вам легко разобраться в создании Instant View и улучшить UX ваших статей. Для достижения совершенства обратите внимание на Чеклист Идеального Instant View.

Корпорация "Центр"

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *