Все пользователи Яндекс.Браузера или расширения визуальные закладки при добавления любимого сайта в табло ожидают увидеть красивое отображение любимого сайта!
Вот так выглядит табло закладок:
Как Вы видите, некоторые закладки (Вконтакте, HelpF.pro, mail.ru) отображаются красиво, а некоторые - кружок с favicon и название:(
В этот статье мы расскажем Вам как настроить красивое отображение сайта в табло Яндекс.Браузера:
Как создать виджет сайта для табло Визуальных закладок
Мы покажем Вам как это сделать на примере нашего сайта - сайт - Web First Consultant
Мы сможем:
- изменить фон виджета для нашего сайта;
- добавить свой логотип;
- настроить вывод значков различных уведомлений.
Для этого необходимо выполнить следующие действия:
- Создать манифест виджета.
- Разместить ссылку на манифест на каждой странице сайта (в HTML-коде страницы внутри тега).
Создание манифеста
Манифест - это JSON-файл определенной структуры, для нашего сайта мы сделали его таким:
{ "version": "1..png", "color": "#fefefe", "show_title": false }, "feed": { "url": "http://сайт/messages", "format": "json", "notifiers": [ { "name": "messages", "icon": "%CHAT%" } ] } }
Кратко о параметрах манифеста
version - номер версии манифест-файла (обязательное поле). Состоит из целых чисел от 0 до 65535 включительно, разделенных точкой. Количество чисел в версии - до четырех включительно. Недопустимо начинать многозначное число с нуля (то есть 32 нельзя указать как 032).
Примеры: "version": "1" или "version": "1.0"
api_version - номер версии API Табло, с которой должен работать виджет (обязательное поле).
Пример: "api_version": 3
layout - описание внешнего вида виджета (обязательное поле). Отвечает за описание логотипа, цвета виджета и отображение заголовка страницы сайта.
feed
- описание нотификаторов, отображаемых поверх виджета (опциональное поле). Если поле feed в манифесте не указано, то виджет будет отображен согласно описанию в поле layout без каких-либо обновляемых нотификаторов.
Требования к логотипам
Картинка-логотип должна отвечать следующим требованиям:
- Формат PNG.
- Прозрачный фон.
- Логотип должен гармонировать с цветом заливки виджета.
Не следует стремиться заполнить логотипом все допустимое пространство на виджете. Основной индикатор - это цвет виджета, логотип служит лишь дополнением.
Ограничения по размеру логотипа:
- длинные горизонтальные логотипы - ширина до 150 пикселей, высота до 20 пикселей.
- короткие горизонтальные логотипы - ширина до 100 пикселей, высота до 30 пикселей.
- квадратные логотипы могут быть до 50 пикселей в высоту.
Требования к значкам нотификаторов
Значки нотификаторов, отображаемых на виджете, должны отвечать следующим требованиям:
- ширина до 14 пикселей.
- высота до 14 пикселей.
- размер до 10 КБ.
Размещение манифеста в коде страницы в разделе HEAD
где manifest.json - URL, по которому можно загрузить манифест виджета.
Мы на своем сайте указали это так:
В результате мы получили:
Проверка отображения виджета
Виджеты в Табло обновляются с определенным интервалом, поэтому чтобы сразу увидеть свои изменения, воспользуйтесь служебной страницей browser://tableau-widget
Вот так она выглядит для нашего сайта:
И так, после не сложных настроек, которые можно сделать за 5 минут, получилось следующее:
Данная настройка не займет у вас много времени, но явно улучшит отношение пользователей в Вашему сайту!
Если у вас не получается настроить это самостоятельно, то Вы всегда можете обратиться к нам за помощью:
Вот примеры виджетов для табло закладок, которые Мы сделали для наших клиентов:
Яндекс.Браузер (Yandex) входит в число наиболее популярных среди пользователей браузеров, поэтому оптимизировать сайт для наилучшего взаимодействия с этим браузером было бы весьма полезно. Например, каждый владелец сайта может настроить для своего ресурса правильное отображение виджета сайта на так называемом Табло - одном из элементов интерфейса Яндекс.Браузера.
Табло в Яндекс.Браузере - это специальная панель с мини-эксизами сайтов, которая облегчает пользователям доступ к недавно посещенным, наиболее часто посещаемым или же избранным сайтам. Представленные в Табло мини-эксизы - это и есть виджеты сайтов, каждый из которых может включать логотип сайта, а также различные нотификаторы (опционально).
Для создания виджета сайта при его добавлении пользователем на Табло Яндекс.Браузер самостоятельно «возьмет» одно из подходящих для этой цели изображений, а также выберет произвольно один из цветов, используемых на сайте, для фоновой заливки виджета. Разумеется, в этом случае гарантировать, что виджет сайта будет привлекателен для посетителей, не удастся.
API Табло позволяет вебмастерам управлять отображением виджетов своих сайтов и тем самым улучшать пользовательский опыт. При этом настройка виджета сайта для Табло возможна двумя способами - либо с помощью мета-тега в HTML-коде страниц сайта, либо с помощью манифеста виджета.
Чтобы настроить виджет сайта для Табло Яндекс.Браузера с помощью мета-тега , в HTML-код каждой страницы необходимо в блоке
разместить такую конструкцию:Оба атрибута данного мета-тега являются обязательными. В атрибуте name указывается наименование мета-тега – yandex-tableau-widget, а в атрибуте content - описание для логотипа, фона заливки и нотификаторов виджета. В значение параметра logo записывается путь к файлу с логотипом, а в значение параметра color - цвет фоновой заливки в шестнадцатеричном формате HEX (#xxxxxx). Параметр feed указывает путь к файлу feed.json, который содержит описание нотификаторов для виджета. Данный параметр не является обязательным.
Второй способ настройки виджета сайта для Табло в Яндекс.Браузере предусматривает использование манифеста виджета . В этом случае необходимо создать файл manifest.json, а затем в блоке
HTML-кода каждой страницы сайта указать ссылку на этот файл в следующем формате:Здесь в атрибуте href указывается абсолютный или же относительный путь к файлу manifest.json , размещенному на сервере в папке сайта. По умолчанию Яндекс.Браузер загружает файл манифеста по указанному пути 1 раз в сутки. Манифест представляет собой JSON-файл, который содержит информацию об используемой версии API Табло, описание логотипа и цвета виджета, а также путь к файлу feed.json, в котором описываются нотификаторы.
Структура файла manifest.json следующая:
{
"api_version": <номер_версии_API_Табло>,
"layout":
{ "logo": "<ссылка на файл логотипа>",
"color": "<цвет виджета в коде HEX>"
},
"feed": <ссылка на файл feed.json>
}
Особенности настройки виджета для Табло Яндекс.Браузера
Чтобы виджет сайта отображался корректно, важно соблюдать определенные правила при его настройке. Например, к изображению логотипа предъявляется целый ряд требований: файл с изображением должен по «весу» не превышать 300 КБ и должен иметь формат PNG; фон у изображения должен быть обязательно прозрачным, а максимально допустимые размеры изображения логотипа составляют 300 пикселей по ширине и 120 - по высоте.
Файлы manifest.json и feed.json не должны превышать 100 КБ и 50 КБ соответственно. Из файла feed.json на виджете сайта отображается максимум 3 нотификатора , и если их будет указано в файле больше (всего доступно 6 нотификаторов), то будут автоматически выбраны для отображения 3 первые из них.
Структура файла feed.json имеет следующий вид:
"feed":
{
"notifications": [
{"<имя значка 1>": <число>},
{"<имя значка 2>": <число>},
{"<имя значка 3>": <число>},
],
"refresh_time" : <частота загрузки файла feed.json, в мин, по умолчанию 60 мин>
}
Здесь в атрибуте «имя значка » указывается одно из 6 возможных значений для нотификаторов: %BELL% - предупреждения, %EARTH% - записи в ленте новостей, %FRIEND% - запросы на добавление в друзья, %MESSAGE% - письма, личные сообщения, %PHOTO% - фотографии, %CHAT% - мгновенные сообщения. А в атрибуте «число » указывается количество (целое число или с плавающей запятой) непросмотренных сообщений соответствующего типа. Рекомендуется при создании файла feed.json оставить для этого атрибута значение «0», чтобы в дальнейшем это значение обновлялось автоматически.
Всем привет! В конце прошлого года ко мне на почту пришло письмо от команды Яндекс.Браузера, в котором шла речь про API Табло и виджет сайта . Честно сказать, я не являюсь постоянным пользователем этого браузера, однако сообщение вызвало неподдельный интерес.
- пользователи Яндекс Браузера;
- пользователи других браузеров с установленным расширением Визуальные закладки .
На данный момент Яндекс браузеру всего лишь чуть больше года, однако его доля среди пользователей рунета составляет порядка 5% и охват постоянно растет.
Представьте себе, что среди этих пяти процентов находится Ваша , почему бы не выделить свой сайт на фоне остальных?
А если учесть, что расширение «Визуальные закладки» доступно для других популярных браузеров, таких как Google Chrome, Mozilla Firefox, Internet Explorer — то число пользователей API Табло будет намного больше. Нужно ли создавать виджет сайта в том случае, если лично Вы не пользуетесь Яндекс.Браузером? Однозначно да!
Как создать виджет сайта для API табло
Начну рассказывать и показывать как это сделать, а за основу в качестве примера возьму свой блог. Но для начала давайте определимся, какие изменения нам предстоит сделать и как они отразятся на табло. Мы сможем:
- изменить фон виджета для нашего сайта;
- добавить свой логотип;
- настроить вывод значков различных уведомлений.
Для того чтобы внести все эти модификации нам понадобится создать файл манифеста для виджета с именем manifest.json , который будет содержать блок метаданных на языке XML. Затем подключаем файл в заголовке страницы, внутри
. Я разместил файл в корневом каталоге, но если хотите — можете использовать другой путь:| 1 |
Содержимое файла:
| 1 2 3 4 5 6 7 8 9 10 | { "version" : "1.0" , "api_version" : 1 , "layout" : { "logo" : "https://сайт/wp-content/themes/lime/images/manifest.png" , "color" : "#e9ffd0" , "show_title" : false } } |
{ "version": "1..png", "color": "#e9ffd0", "show_title": false } }
Внимание! Вам потребуется внести свои изменения в код перед применением! Что означают указанные параметры:
- version — версия виджета. Любое число, например 1 или 2; 1.0 или 2.0 и т.д.
- api_version — номер версии API Табло. На данный момент существует только 1.
- logo — укажите абсолютный путь к графическому файлу логотипа.
- color — цвет заливки фона.
- show_title — отображение заголовка страницы. Может принимать два значения: false — не показывать; true — показывать.
В своем примере я не стал приводить настройки значков уведомлений, потому как не компетентен в данном вопросе — здесь потребуется помощь программиста. Среди возможных вариантов применения — уведомления о новых письмах (как это реализовано у Яндекс почты), число лайков и прочее. Более подробную техническую документацию можно найти на странице Яндекс API , в том числе примеры настройки уведомлений.
К логотипу предъявляются особые требования:
- графический файл должен быть формата PNG с прозрачным фоном;
- максимальные размеры: ширина 150px, высота 60px.
Все виджеты Яндекс Табло обновляются автоматически с некоторым заданным интервалом, понадобится время чтобы увидеть изменения. Возможно придется несколько раз почистить браузера. Однако, если Вы не желаете ждать, то откройте в Яндекс браузере страницу chrome://tableau-widget и укажите в строке URL манифеста, после чего нажмите на кнопку Проверить:
Если код манифеста оформлен верно — появится надпись «Манифест виджета верен», в противном случае возникнет ошибка. Есть и другой способ увидеть изменения сразу — вручную добавить сайт на табло:
После продолжительных манипуляций в конце-концов я получил такой результат:
Он конечно не претендует на звание лучшей дизайнерской работы 😀 По крайней мере отражает суть и заданный стиль оформления блога. А тайтл я не стал выводить (show_title), т.к. нельзя настроить отступы и цвет шрифта — в моем случае название является частью изображения. А Вы уже сделали виджет своего сайта для табло браузера и визуальных закладок Яндекса?
Несмотря на усилия разработчиков создать интерфейс Яндекс – Браузера интуитивно понятным, зачастую сложно сразу догадаться где в настройках включать или отключать те или иные элементы управления. Так обстоит дело с исчезнувшим элементом “Табло”.
Табло – специальная область сверху браузера, где расположены миниатюрные изображения сайтов или логотипов. Так как область занимает приличное место, её сделали такой, что она то появляется, то исчезает. Момент появления и исчезновения разработчики попытались спрогнозировать основываясь на действиях пользователя.
Так, если пользователь желает попасть на какой-либо сайт, он начинает писать в строке адреса URL, в этот момент программа считает, что самое время показать Табло, ведь этот сайт возможно уже представлен на нём.
Если оно исчезло
Как только сайт начинает подгружаться – Табло исчезает. Вернуть его можно начав посещение нового ресурса. Об этом подробнее – ниже.
Как его вызвать
Табло появляется только если пользователь изъявляет намерение посетить какой-нибудь портал. Это намерение предполагает совершения одного из двух действий:
- Открытие новой вкладки;
- Написание адреса ресурса в строке Яндекс Браузера.
Эти действия и являются как бы командами, которые алгоритм программы использует для того, чтобы открыть “Табло”.
Таким образом нет смысла искать его где-то в настройках, начните писать адрес – и оно появиться.
Можно ли его растянуть
Насколько мне известно нет возможности увеличить “Табло”. Разработчики не заложили эту возможность в обозреватель. Не получится и добавить больше сайтов – максимальное их число ограниченно 18.
Элементы управления
Для того чтобы настроить “Табло” необходимо перейти в режим редактирования. Снизу в окне можно видеть ссылку “настройка”, при её нажатии “Табло” переводится в режим редактирования – возле каждой миниатюры появляются графические элементы управления – иконки закрепления/открепления (в виде стилизованного замка) и иконка удаления (крестик). Также можно менять местами виджеты путем их перетаскивания.
Запретить появление
В официальном разделе помощи Яндекса сказано:
Если вас раздражает появление “Табло” можно его удалить. Для этого нужно перейти в настройки Яндекс — Браузера и найти модуль, отвечающий за внешний вид. В нём отключить опцию “Открывать Табло”.
Я сколько не пытался найти эту опцию не нашел. Скорее всего эту возможность убрали в новых версиях браузера.
Оно куда-то делось
Если “Табло” не открывается, значит вы отключили его в настройках. Смотрите предыдущий пункт статьи и сделайте обратные действия – включите опцию “Открывать Табло”.
Изменить фон
Табло нельзя сделать прозрачным. Такой возможности не предусмотрено (насколько я владею информацией). Более того работа с фоном также была прекращена – я не вижу в своем браузере кнопок по редактированию фона, хотя в инструкции в разделе помощи Яндекса они описаны. Это значит, что данная возможность уже утрачена в новых версиях.
Не сохраняется в облаке
Синхронизация “Табло” не происходит по очень простой причине – эту возможность разработчики Яндекса предпочли убрать исходя из своих соображений.
Both comments and trackbacks are currently closed.