Свое табло в яндекс браузере. Настраиваем виджеты на стартовой странице яндекса Требования к логотипам

Describing a Widget in HTML Code

Insert the following metatag in the section in the HTML code of each webpage:

Attribute description (both attributes are required):

name is the name of the meta tag yandex-tableau-widget .

content is the description of the logo and color of the widget, and notifiers in the following format: content="logo=logo.png, color=#ffffff, feed=feed.json"

URLencoded .

Widget manifest

Restriction. The size of the manifest.json file must not exceed 100 KB.

Another way to configure a widget is to create a widget manifest file and place a link to it within the tag in the HTML code of each page.

where manifest.json is the path for downloading the widget manifest. It can be relative or absolute:

The absolute path is the full URL of the file. Example: http://sitename.tld/... /manifest.json .

The relative path is the path to the widget manifest relative to the page that the widget is configured for. Example: manifests/manifest.json .

The browser will download the manifest file once a day via the link you entered. If the browser is opened less frequently than once a day, the file will be downloaded every time the browser is restarted.

feed is an optional attribute that specifies the path to the feed.json file with the description of notifiers. The widget is displayed without notifiers if this attribute isn"t included. The path must be URLencoded .

Purpose and format of the feed.json file

Restriction. The size of the feed.json file should not exceed 50 KB.

The feed.json file contains the description of notifiers displayed in the widget and their current values. It is automatically downloaded from the server at a frequency set by the webmaster (by default, every 60 minutes). This allows the notifiers to update. If, during the download, the server returns an incorrect answer three times in a row, the notifier values will be reset to zero.

Restriction. The response to the request for feed.json at the address specified in the manifest must be of the type Content-Type: application / json .

Feed.json is a JSON file with the following structure:

{ "notifications": [ {"": }, //Description of the 1st notifier; the number is an integer or a floating point number (up to two decimal places). {"": }, //Description of the 2nd notifier. {"": }, //Description of the 3rd notifier. ], "refresh_time" : }

where the attribute icon name accepts one of these predefined values:

while the attribute number is the number of non-viewed messages of the selected type. When creating a file, we recommend entering 0 . The attribute value will be updated automatically in the future.

The color of icons is determined automatically; if the widget has a dark background, the notifier will have a light color, and vice versa.

Restriction. A widget can display no more than three notifiers. If the feed file specifies more than three notifiers, the widget will display the first three of them.

Example of the widget description with notifiers

feed.json file

{ "notifications": [ {"bell": 1}, {"friend": 2}, {"message": 1} ], "refresh_time" : 2 }

Values of notifiers to display on the site"s Tableau widget in Yandex Browser

Widget design requirements

You need to define the background color and logotype image for the website widget.

Tip. The background color should correspond to either the company"s signature color or the website"s main background color.

Logotype requirements

The logotype image should meet the following requirements:

Examples of good and poor logotypes

Examples of widget design

Site	youtube.com	yandex.com	bbc.com	twitter.com
Fill color	#3b5998	#ffffff	#000000	#00adec
Widget background
Logo
Result

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

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое

Подробнее

Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.

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

После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так

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

Встречайте, manifest.json!

С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Генерируй и властвуй.

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

brucelawson.github.io/manifest - все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.

www.favicon-generator.org - хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).

manifest-validator.appspot.com - этот инструмент предназначен для валидации вашего манифеста.

Результат

Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующие

Все. Смотрим, что получилось
Иконка:

Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.

Загрузка приложения:

Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.

Сам сайт:

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

Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться

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

Вот так выглядит табло закладок:

Как Вы видите, некоторые закладки (Вконтакте, 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 минут, получилось следующее:

Данная настройка не займет у вас много времени, но явно улучшит отношение пользователей в Вашему сайту!

Если у вас не получается настроить это самостоятельно, то Вы всегда можете обратиться к нам за помощью:

Вот примеры виджетов для табло закладок, которые Мы сделали для наших клиентов:

Всем привет! В конце прошлого года ко мне на почту пришло письмо от команды Яндекс.Браузера, в котором шла речь про API Табло и виджет сайта . Честно сказать, я не являюсь постоянным пользователем этого браузера, однако сообщение вызвало неподдельный интерес.

пользователи Яндекс Браузера;
пользователи других браузеров с установленным расширением Визуальные закладки .

На данный момент Яндекс браузеру всего лишь чуть больше года, однако его доля среди пользователей рунета составляет порядка 5% и охват постоянно растет.

Представьте себе, что среди этих пяти процентов находится Ваша , почему бы не выделить свой сайт на фоне остальных?

А если учесть, что расширение «Визуальные закладки» доступно для других популярных браузеров, таких как Google Chrome, Mozilla Firefox, Internet Explorer — то число пользователей API Табло будет намного больше. Нужно ли создавать виджет сайта в том случае, если лично Вы не пользуетесь Яндекс.Браузером? Однозначно да!

Как создать виджет сайта для API табло

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

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

Для того чтобы внести все эти модификации нам понадобится создать файл манифеста для виджета с именем manifest.json , который будет содержать блок метаданных на языке XML. Затем подключаем файл в заголовке страницы, внутри . Я разместил файл в корневом каталоге, но если хотите — можете использовать другой путь:

1	<link rel = "yandex-tableau-widget" href = "/manifest.json" / >

Содержимое файла:

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

API Табло - виджета сайта в визуальных закладках. В статье рассмотрен процесс его создания.

Если пользуетесь Яндекс.Браузером, визуальными закладками в Firefox, IE или Chrome, то, наверняка, замечали, что есть у некоторых сайтов особенность, а точнее несколько:

Не у всех сайтов одинаковые логотипы и названия. У некоторых название отсутствует, а логотип крупнее.
Имеется информер сообщений/заявок в друзья/ответов и прочее

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

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

Как реализовать?

Создаем пустой файл в блокноте (кодировка UTF-8) с названием manifest и расширением json. Указываем версию манифеста и версию API в этом файле:

{ "version": "1", "api_version": 1, }

Добавляем настройки внешнего вида информера: ссылка на логотип, цвет фона, показывать ли заголовок сайта

"layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }

Теперь самое интересное - выводим рейтинг пользователя, который авторизован. Указываем источник API uCoz, формат отдаваемых данных, настраиваем уведомление. Уведомление состоит из названия, иконки (можно указать свои ссылки) и расположение в XML значения рейтинга.

"feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] }

Собираем все вместе:

{ "version": "1", "api_version": 1, "layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }, "feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] } }

Загружаем на сайт и подключаем в head страниц сайта этот файл:

Не забываем задействовать API на своем сайте.

Чтобы увидеть результат, необходимо удалить сайт из закладок и добавить снова.