• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

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

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

  1. Главная
  2. Яндекс и его сервисы

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

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

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

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

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©