Отображение сайта на табло Яндекс.Браузера

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

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

Как Вы видите, некоторые закладки (Вконтакте, 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 и продвижению сайтов

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