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

Обновлено: 07.01.2025

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

Переходим дальше и видим 3 поля:

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

Первая и самая важная задача - определить тело страницы (body), которое будет отображаться правильно.

Для этого можно использовать любой браузер и функцию "просмотреть код элемента". При наведении на необходимые теги, на странице отображается участок страницы, что легко помогает определить нужный нам. В качестве примера я беру страницу со своего сайта readytospeak.ru/learn-grammar-5-ways-09-2017. Ниже приведены 2 скрина охвата блоком div с классом "entry-inner ". Необходимо выбрать максимально информативный участок страницы без лишних блоков и заголовка статьи.

Это не обязательно должен быть div, может быть article, p и другие. Самое главное, чтобы можно было идентифицировать нужный блок.

Добавляем строку: body: //div[has-class("entry-inner")] в правила нашего шаблона, где "entry-inner" есть class моего div блока (см. скрин выше). Теперь Telegram понимает, что отображать в IV, и получаем следующую картину.

Можно смело нажимать "mark as checked" и "view in telegram" и смотреть результат на своем мобильном устройстве. У вас уже будет полноценная страница IV, которую вы можете использовать для отображение сайта в Telegram. Выделенной красным цветом области у вас не будет. Об этом я расскажу чуть позже.

Красивее будет смотреться, если в шапку нашего шаблона вставим превью страницы. На помощь приходит OG протокол ( Open Graph protocol).

Добавляем следующий текст перед нашим body:

Функция append добавляет картинку в шапку нашего шаблона IV и страница выглядит еще лучше.

В следующем шаге мы добавим автора статьи. Добавим в наш код следующие строки:

На всех ваших страницах будет отображаться именно этот автор (ссылка на сайт). Если у вас в коде страницы есть блок, в котором содержится автор статьи, то можно применить следующий код:

"author__title" - класс блока div, в котором содержится имя автора (пример взят с сайта матч-тв ссылка)

Если посмотреть всю страницу целиком, то заметим небольшой баг в конце статьи.

Вылезло ненужное слово "поделится:", его очень легко убрать с помощью "remove". Пишем следующий код:

Слово "Поделится:" находится в div-блоке с классом "ya-share2". Данный код означает "убрать из тела блок div с классом ya-share2".

Нужно добавить правило, которое будет указывать на каких страницах работает IV. Добавим следующий код:

Это правило будет выполняться для страниц на которых есть блок div с классом "entry-inner" .

В итоге получаем следующий код и страницу IV:

@append(, src, @content): //meta[@property="og:image"]

Теперь небольшая фича, которая поможет собрать подписчиков на канале. В шапке вашей страницы, можно сделать блок, в котором будет отображаться название вашего канала и кнопка "Присоединиться" (выше выделено красным цветом). Для этого необходимо добавить в head вашего сайта следующую строку:

Результат моей страницы можете увидеть на мобильном устройстве по ссылке.

Как сгенерировать ссылки вручную для других страниц

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

Выкладываем красивую ссылку на ваш канал

Использовать API Telegram и писать бота для отправки постов
Использовать готовый (к примеру @ControllerBot)

Я расскажу про 2-ой вариант. Во-первых, в настройках этого бота необходимо включить html форматирование.

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

Если у вас есть чем поделится, то пишите в комментариях ваши решения и идеи, замечания.

Instant View позволяет пользователям Telegram мгновенно просматривать статьи с интернета без ожидания загрузки страницы. Когда вы получаете ссылку на статью через Telegram, нажмите кнопку «Посмотреть» и страница моментально откроется.

И самое главное, веб-мастерам не нужно ничего менять на своих сайтах для работы Instant Views.

Как это работает?

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

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

Если у вас есть канал, можете направлять на него пользователей с ваших старниц Instant View.

Редактор Instant View

Редактор IV Telegram позволяет создавать и тестировать шаблоны для любого домена. Сначала перейдите в «Мои шаблоны», введите целевой URL-адрес шаблона Instant View в поле и нажмите «Ввод». Так вы откроете редактор. Исходная страница будет отображаться слева.

Примеры шаблонов

Путеводитель по шаблонам

У создания шаблона Instant View есть четыре главные цели:

Шаг 1. Создайте свой шаблон

Для начала, чтобы четко определить, какие части сайта будут, а какие не будут затрагивать ваш шаблон, вы, вероятно, будете использовать условия.

Шаг 2. Добавьте только необходимое

Для страницы Instant View нужно создать, как минимум, два свойства: title (заголовок) и body (тело). Внимательно ознакомьтесь с целевой статьей и убедитесь, что все важные элементы перенесены на страницу IV в формате, поддерживаемом приложениями Telegram.

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

Шаг 3. Удалите ненужное

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

Шаг 4. Усовершенствуйте шаблон

На этом этапе нужно проверить другие страницы вашего сайта. Проверьте, есть ли IV у страниц, которым они действительно нужны.

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

Отслеживание изменений

Если обнаружены изменения, строка состояния отобразит разницу и результат:

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

Шаблоны публикаций

Для своей аудитории

Для всех пользователей Telegram

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

Полную документацию Instant View смотрите здесь.

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

Редактор Instant View

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

Перед нами 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 существуют и другие, ниже их полный список на текущий момент:

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

Свойства

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

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

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

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

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

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

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

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

Типы данных

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

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

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

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

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

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

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

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

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

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

Публикация

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

Бонус. Instant View и Cloudflare

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

Заключение

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

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

Instant view

Что такое Instant view?

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

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

Instant view в Телеграме

Как работает Instant view?

Шаблоны моментального просмотра – это свод правил и алгоритмов, исходя из которых бот создает превью страницы в Telegram – удаляет все лишнее и выводит аккуратный текст в Instant view.

Данная функция также полезна тем, что позволяет открывать веб-страницы гораздо быстрее, чем в обычном браузере. Но даже это еще не все плюсы паттернов Instant view.

Шаблон моментального просмотра

Преимущества шаблона

Как сделать шаблон Instant view?

Редактор Instant view Editor дает возможность создавать свои шаблоны для предпросмотра. Для добавления вашего паттерна в Telegram, он должен пройти модерацию – тогда его можно будет использовать для просмотра в мессенджере статей с вашего сайта.

Экран редактора

Запустив Instant view Editor, зайдите в раздел «Мои шаблоны», пройдите процесс регистрации и оставьте ссылку на нужную веб-страницу. Далее откроется сам редактор с дальнейшими подробными инструкциями.

Правила создания Instant view

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

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

Что такое Instant View?

Это технология быстрого просмотра ссылок непосредственно в интерфейсе Telegram, можете попробовать перейти по ссылке и зашарить её в Телеграме:

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

Как создать свой шаблон?

Шаг 1. Dashboard
Переходим на домашнюю страницу Instant View и заходим в свой профиль телеграма (в правой колонке в самом низу будет Login). Затем переходим на страницу шаблонов My Templates и в единственное поле на странице вбиваем ссылку на подопытную статью:

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

Шаг 2. Редактор шаблонов
После этого мы попадём в редактор шаблонов. В редакторе перед нами будет 3 окошка — собственно страница нашего сайта, редактор шаблона, и предпросмотр Instant View:

На картинке уже есть текст шаблона, а вас встретит пустой редактор.

Шаг 3. Редактирование
А теперь нас ждут первые напряги, и связаны они будут с тем, что нам надо будет изучать мануал, и не только по Instant View, но и по XPath. Но обо всём по порядку.

Начнём с версии шаблона, тут пока всё просто, будем использовать самую свежую из доступных:

открываем подопытную страницу в отдельной вкладке вашего браузера;
кликаем правой кнопкой мыши на заголовке и выбираем пункт Inspect element ;
перед вами откроется консоль вашего браузера, и среди прочего кода страницы будет подсвечен целевой элемент;
правой кнопкой мыши по нему, и выбираем пункты Copy > Copy XPath ;
вставляем в редактор шаблона получившийся результат;
повторяем данные пункты для контента статьи.

Вот мои результаты для заголовка title и для контента body :

Если всё хорошо, то у нас уже должен появится результат в правом окошке редактора:

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

Дату публикации тоже стоит выделить:

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

Так, ещё есть ряд свойств, которые относятся к оформлению ссылок, меня же интересует пока только image_url — картинка для ссылки. В качестве оной я опять буду брать первую картинку из текста статьи:

Дальше опять чуток напрягов, я хочу использовать данный шаблон только для страниц и постов, а они у меня отличаются от прочих страниц лишь тем, что для заголовка используется тег H1 , чтобы добавить такую проверку следует использовать условие exists :

Чуть-чуть оптимизации — добавлю переменную, в которой собственно и буду хранить XPath к статье:

Я слегка изменил исходный XPath, чтобы он был более однозначным — добавил название тега с id="posts" , да и article у меня всегда указан с классом entry

Итоговый шаблон обрёл завершённый вид:

Кликнув по ссылке VIEW IN TELEGRAM вы можете посмотреть на результат моих трудов.

Шаг 4. Отслеживание страниц

Когда шаблон для подопытной страницы готов нажимайте на ссылку TRACK CHANGES в правом верхнем углу — теперь бот будет отслеживать данную страницу на ошибки и изменения которые будут появляться после изменения шаблона.

Выбирайте следующую страницу сайта и проверяйте шаблон на ней. Если вы вносили изменения в шаблон, то бот проверить все отслеживаемые страницы и отобразит статус:

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

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

Контент

Параметр	Тип	Описание
title обязательный	RichText	Заголовок страницы
subtitle	RichText	Подзаголовок страниц
cover	Media (Image/Video/Embed/Map)	Обложка статьи
body обязательный	Article	Содержание страницы
kicker	RichText
published_date	Unixtime	Дата публикации

Автор

Параметр	Тип	Описание
author	String	Имя автора
author_url	Url	Ссылка на автора
channel	String	Профиль или канал автора в формате @username

Оформление превью для ссылки (как на первом скрине в начале статьи)

Параметр	Тип	Описание
site_name	String	Имя сайта
description	String	Короткое описание
image_url	Url	Изображение
document_url	Url	Ссылка на документ

Отладка

Для отладки у нас есть аж одна функция — debug . С её помощью можно проверить, что именно было найдено с помощью XPath:

После сохранения шаблона внизу страницы появится отладочная информация:

Ещё один способ использовать debug – просмотреть результат выполнения предыдущей функции, т.е. показать не то с чем работала предыдущая функция, а именно то, что у неё получилось:

Типичные ошибки

Element <img> is not supported in <p>

Если в результате у вас появятся пустые параграфы, то это подчистят без вашего участия.

Альтернативный вариант — заменить <p> на <div> :

Element <img> is not supported in <a>

Следующий случай оказался сложнее — есть ссылки, внутри которых лежит картинки. У меня оказалось два варианта, и два возможных сценария изменения:

ссылка на большую картинку — ссылку грохаем, оставляем картинку
ссылка на что-то другое — картинку грохаем, title картинки используем в качестве текста ссылки

Instant View поддерживает ряд интеграций среди которых Twitter, YouTube, Vimeo и прочие, но список не слишком велик, и в том случае, когда шаблонизатор сталкивается с незнакомым iframe он ругается подобной ошибкой. К сожалению, всё что не знакомо мне пришлось удалить:

А для моего WordPress?

А теперь я приведу шаблон, который я использую для своего фото-блога.
У меня фото-блог крутится на WordPress с темой Twenty FifteenVersion, и его шаблон выглядит куда как проще чем для этого блога.
И да, данный шаблон подойдёт для всех тем из семейства Twenty.

Если вы единственный автор блога, то в качестве author_url укажите ссылку на сам блог, или на любую другую страницу о вас. Параметр channel тоже стоит добавить, если конечно вы ведёте свой канал.

Можете посмотреть как он работает, для этого вам достаточно перейти по ссылке и зашарить её в Телеграм (я обычно пользуюсь Saved Messages для этого). Ну и да, rhash для этого шаблона 7b32af06bd787a , можете попробовать, подходит ли он вам.

Для каких страниц создавать?

Создавать Instant View представление стоит только для страниц со статичным контентом. Вот хорошие примеры:

Читайте также: