Свое табло в яндекс браузере. Как настроить виджеты на главной странице яндекс Как настроить виджеты в яндекс браузере

Эта заметка посвящается использованию Яндекс 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/.

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

Манифест для сайта – это простой 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 браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

Как Вы видите, некоторые закладки (Вконтакте, 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», чтобы в дальнейшем это значение обновлялось автоматически.