Отображение сайта на табло Яндекс.Браузера
Все пользователи Яндекс.Браузера или расширения визуальные закладки при добавления любимого сайта в табло ожидают увидеть красивое отображение любимого сайта...
Все пользователи Яндекс.Браузера или расширения визуальные закладки при добавления любимого сайта в табло ожидают увидеть красивое отображение любимого сайта!
Вот так выглядит табло закладок:
Как Вы видите, некоторые закладки (Вконтакте, HelpF.pro, mail.ru) отображаются красиво, а некоторые - кружок с favicon и название :(
В этот статье мы расскажем Вам как настроить красивое отображение сайта в табло Яндекс.Браузера:
Как создать виджет сайта для табло Визуальных закладок
Мы покажем Вам как это сделать на примере нашего сайта - W1C.ru - Web First Consultant
Мы сможем:
- изменить фон виджета для нашего сайта;
- добавить свой логотип;
- настроить вывод значков различных уведомлений.
Для этого необходимо выполнить следующие действия:
- Создать манифест виджета.
- Разместить ссылку на манифест на каждой странице сайта (в HTML-коде страницы внутри тега ).
Создание манифеста
Манифест — это JSON-файл определенной структуры, для нашего сайта мы сделали его таким:
{ "version": "1.1", "api_version": 1, "layout": { "logo": "http://w1c.ru/tableau.png", "color": "#fefefe", "show_title": false }, "feed": { "url": "http://w1c.ru/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 и в код в раздел HEAD добавить:
<link rel="yandex-tableau-widget" href="manifest.json" />
где manifest.json — URL, по которому можно загрузить манифест виджета.
Мы на своем сайте указали это так:
<link rel="yandex-tableau-widget" href="https://w1c.ru/tableau.json">
В результате мы получили:
Проверка отображения виджета
Виджеты в Табло обновляются с определенным интервалом, поэтому чтобы сразу увидеть свои изменения, воспользуйтесь служебной страницей browser://tableau-widget
Вот так она выглядит для нашего сайта:
И так, после не сложных настроек, которые можно сделать за 5 минут, получилось следующее:
Данная настройка не займет у вас много времени, но явно улучшит отношение пользователей в Вашему сайту!
Если у вас не получается настроить это самостоятельно, то Вы всегда можете обратиться к нам за помощью: Услуги по Web и продвижению сайтов
Вот примеры виджетов для табло закладок, которые Мы сделали для наших клиентов: