Как настроить виджеты на главной странице яндекс. Табло в Яндекс.Браузере: особенности работы Размещение манифеста в коде страницы в разделе HEAD

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

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

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

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

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

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

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

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

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

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

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

Яндекс.Браузер (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 Табло - виджета сайта в визуальных закладках. В статье рассмотрен процесс его создания.

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

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

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

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

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

Решения для виджетов

Благодаря API uCoz вариантов решений масса, главное помнить, что можно вывести только число. Что это за числа могут быть?

Полное описание API на uCoz находится .

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

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

Самым популярным сайтом-поисковиком в мире стал «Google», однако среди русскоязычных пользователей первое место стабильно занимает «Яндекс».

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

Давайте рассмотрим поближе, какие «удобства и вкусности» нам предлагает Яндекс.

Поисковый сайт Яндекс начинает «общение» с нами при помощью основного своего интерфейса — . Чтобы открыть её, нужно набрать в адресной строке любого браузера yandex.ru :

Поиск сайта yandex.ru

Поисковик продемонстрирует нам свою главную страницу. Здесь можно найти новости, биржевые сводки, погоду и многое-многое другое.

Однако, не многие пользователи обращают внимание на то, что главную страницу самого популярного поисковика можно настроить «под себя».

Что такое виджеты Яндекса.

Главная страница yandex.ru состоит из блоков с информацией, которые и являются виджетами. Некоторые виджеты представляют из себя небольшие приложения — часы, календарь и т.д. Остальные — это ссылки на популярные информационные и развлекательные ресурсы (сайты).

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

Вот так выглядит страница поисковика по умолчанию:

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

Как установить виджеты Яндекса.

Сначала проверим функции удаления и настройки имеющихся блоков.

Для начала нужно зайти в Настройки => Настроить Яндекс .

У виджетов появился серый фон, обозначающий их границы, кнопочки настройки (шестерёнки) и удаления блока (крестик).

С удалением, думаю, вопросов не возникнет: не нужен блок — щёлкаем по крестику ЛКМ, виджет удаляется.

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

Сначала пройдёмся по тем виджетам, которые уже установлены на странице. Удалим ненужные и подкорректируем при желании настройки тех, которые мы оставили. Теперь можно зайти в каталог и посмотреть, что ещё предлагает нам Яндекс.

Каталог виджетов.

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

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

Например:

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

Дальнейшие действия проделываем на основной странице. Нам ещё раз предлагается сделать выбор — оставить выбранный блок или удалить. Если визуальный интерфейс нас устраивает, подтверждаем кликом ЛКМ на Установить .

После выбора всех интересных виджетов, нужно найти для них наилучшее месть на странице. Эта опция доступна сразу после входа в настройки Яндекса. Чтобы переместить информационный блок, нужно навести видоизменённый курсор на тот виджет,который собираемся двигать, зажать его ЛКМ и передвинуть в нужном направлении.

А на сегодня о виджетах всё. Приятной вам навигации.

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

Многие конечно видели как выглядят визуальные закладки сайтов в Яндекс.Браузере, когда нажимается кнопка «Новая вкладка». Визуальные закладки некоторых сайтов, таких как например Яндекс , YouTube, GMail выглядят очень симпатично, а большинство персональных сайтов, да и не только персональных, смотрятся довольно убого. Так вот чтобы каждый начинающий вебмастер смог быстро и легко создать симпатичный виджет своего сайта и публикуется эта заметка. Конечно же на сайте api.yandex.ru есть документация, но ее многие новички просто боятся или ленятся читать. По инструкции в этой заметке всего за 4 шага создадим самый простой виджет API Табло для своего персонального сайта. Итак, поехали.

1. Создаем картинку-логотип виджета сайта

В любом графическом редакторе создаем картинку с максимальной шириной 150 пикселей и максимальной высотой 60 пикселей, с прозрачным фоном и сохраняем ее в файл обязательно формата PNG с именем ya-manifest.png .

2. Создаем файл Манифеста виджета сайта

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

{ "version": "1.0", "api_version": 1, "layout": { "logo": "http://ВАШ_ДОМЕН/ya-manifest.png", "color": "#003C50", "show_title": false } }

и сохраняем его с именем ya-manifest.json . Только не забудьте вместо «ВАШ_ДОМЕН» вписать домен вашего сайта, а в поле «color» вставить код цвета для фона вашего виджета. В поле «show_title» можно при желании поставить в «true», если хотите, чтобы в виджете под картинкой выводилась строка названия вашего сайта, но если параметр «title», т.е. само название у вашего сайта очень длинное, то этого делать не стоит, иначе в виджете будет показано обрезанное название.

3. Закачиваем файлы картинки-логотипа и манифеста на сайт

Используя FTP закачивайте оба созданных вами файла ya-manifest.png и ya-manifest.json в корневой каталог вашего сайта.

4. Добавляем ссылку на манифест в заголовке главной страницы сайта

Ссылку на манифест вашего виджета нужно разместить в файле, который выводит заголовок страниц вашего сайта, особенно главной страницы, внутри тега. Например для сайтов на движке WordPress оптимальным решением будет размещение ссылки в файле header.php текущей темы сайта. Ее код будет таким:

Важно, чтобы в параметре «href» был указан правильный путь к созданному вами файлу манифеста ya-manifest.json . На этом собственно создание виджета вашего сайта завершено.

Проверка виджета в Яндекс.Браузере

Открываем Яндекс.Браузер и загружаем в нем главную страницу вашего сайта. Затем кликаем по кнопке «Новая вкладка» в Яндекс.Браузере и наслаждаемся отображаемым там вашим виджетом, который любой пользователь Яндекс.Браузера сможет поместить для себя в Табло закладок.

Приведенная в этой заметке инструкция по созданию виджетов для сайтов на основе Яндекс API Табло конечно же не описывает все возможности и настройки виджетов, поэтому те, кто хочет использовать все по максимуму, могут обратиться к документации по адресу http://api.yandex.ru/tableau/doc/.