Как настроить виджеты в яндекс браузере. Яндекс.Табло — инструкция по созданию. Что такое Табло

Материал устарел.

Что такое Табло в Яндекс брузере? Это та же экспресс-панель, какая бывает и в других браузерах. Собственно, вот вопрос: о чем эта статья и что я тут делаю?

По сути это мелочь, ну, а почему бы и нет?

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

Приступим

Добавьте следующий код на всех страницах сайта между и

200?"200px":""+(this.scrollHeight+5)+"px");">

manifest.json - URL виджета, отсюда браузер возьмет информацию для табло.

Создайте файл manifest.json со следующим содержимым:

200?"200px":""+(this.scrollHeight+5)+"px");">{
"version": "1",
"api_version": 1,
"layout":
{
"logo": "http://сайт/images/logo_rus.png",
"color": "#236999",
"show_title": false
}

Замените #236999 на свой цвет. Вы можете взять его из этого каталога безопасных цветов .

Подробная документация на странице API Табло .

Не получилось?

Если у Вас не получилось, ошибку можно выявить с помощью страницы chrome://tableau-widget/ . Там следует ввести ссылку на manifest.json на Вашем сайте.

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

Открывается Табло - панель с виджетами сайтов, которые вы чаще всего посещаете. По умолчанию на Табло установлены виджеты некоторых сервисов Яндекса.

Чтобы перейти на нужный сайт, нажмите на его виджет (на нем отображается логотип и, если виджет открывает не главную страницу сайта, название страницы).

Совет. Чтобы быстро открыть нужный виджет на Табло, используйте сочетания клавиш:

в Windows: нажмите Ctrl + T , а затем Alt + 1, 2... ,

в macOS: нажмите ⌘ + T , а затем Ctrl + 1, 2... ,

где 1, 2... - это номера виджетов на Табло (слева направо и сверху вниз).

Набор и последовательность виджетов на Табло можно настроить вручную .

Примечание. Чтобы изменить размер Табло, нажмите на любой виджет правой клавишей мыши и выберите команду Размер Табло → Нормальный или Размер Табло → Увеличенный . Если выбрать команду Размер Табло → Подстраивать под окно браузера , то при уменьшении окна браузера размер виджетов тоже будет меняться.

Автоматический подбор сайтов для Табло

В процессе установки браузер подбирает сайты для Табло на основе импортированной из других браузеров истории - на Табло попадают сайты, которые вы открывали чаще других. Если при установке вы не импортировали историю, на Табло отображается набор сайтов по умолчанию.

Яндекс.Браузер периодически обновляет на Табло виджеты, которые вы не закрепили . Добавляются сайты, которые вы чаще других ищете через Умную строку или открываете через Табло.

Сайты, удаленные с Табло вручную, добавляться на него автоматически больше не будут. Чтобы вернуть такой сайт на Табло, добавьте его сами.

Добавление виджетов на Табло

Откройте Табло.

Под Табло нажмите Добавить → Сайт .

Укажите сайт, который вы хотите добавить на виджет Табло. Вы можете выбрать сайт из списков Популярные или Недавно посещённые , а также ввести его адрес вручную.

Ограничение. На Табло можно разместить до 20 виджетов.

Редактирование виджетов

Чтобы управлять содержимым Табло, перейдите в режим редактирования:

В режиме редактирования вы можете:

","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"circle","direction":["top","left"],"alt":"Удалить виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","left"],"alt":"Закрепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["bottom","right"],"alt":"Открепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Отредактировать виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">

Папки с виджетами на Табло

Вы можете группировать виджеты в папки. Например, по умолчанию виджеты со ссылками на сервисы Яндекса сгруппированы в одну папку.

Создать папку с виджетами Удалить папку с виджетами

Синхронизация Табло

На разных устройствах у вас могут быть разные любимые сайты, поэтому Табло на устройствах формируется независимо друг от друга.

Чтобы узнать, какие виджеты закреплены на Табло на любом из синхронизированных устройств:

Выберите папку с названием устройства. Сайты, закрепленные на Табло, располагаются в верхней части открывшегося списка.

После этого на вкладке Другие устройства сайты, закрепленные на Табло, отображаться не будут.

Табло после переустановки ОС

Если на компьютере были переустановлены операционная система, а затем браузер, Табло обновится - на нем появятся виджеты по умолчанию. Но просмотреть список сайтов, закрепленных на Табло до переустановки, вы можете с помощью синхронизации (она привязана к имени устройства).

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

Если такой папки нет, то имя компьютера после переустановки, скорее всего, не изменилось. В этом случае браузер не считает компьютер новым устройством и не показывает папку с данными до переустановки. Переименуйте компьютер (Панель управления → Система и безопасность → Система → Дополнительные параметры системы → Имя компьютера ) и подождите немного, чтобы данные синхронизировались с сервером. Затем откройте вкладку Другие устройства и откройте папку со старым именем компьютера.

Пропадают виджеты на Табло

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

Чтобы виджет всегда находился на одном и том же месте, закрепите его:Сейчас

","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Закладки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","right"],"alt":"Недавно закрытые вкладки","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Загрузки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["top","right"],"alt":"Вкладки, открытые на другом устройстве","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["bottom","left"],"alt":"Дополнения","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true}]}}\">

","hasTopCallout":true,"hasBottomCallout":false,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Прежнее расположение всех ссылок на одной панели","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">

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

Большинство пользователей привыкли уже к главной странице Яндекса, но ее легко можно изменить. Например, сделать главную страницу такой:

Настройки действуют только для того браузера, с которого настраиваете!

Начнем с оформления. Чтобы выбрать тему для главной страницы, необходимо нажать значок в правом верхнем углу и, в появившемся меню, выбрать строку «поставить тему».

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

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

Если темы не устраивают, можно перелистывать темы стрелочками вправо и влево.

После выбора темы, необходимо нажать кнопку «сохранить тему», которая находится снизу. Если передумали устанавливать тему, то можно закрыть окно или нажать кнопку «отмена».

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

При нажатии «настроить яндекс», переходим в режим замены и удаления ненужных виджетов. Виджеты можно просто перетаскивать с помощью мышки на место другого виджета (навести на виджет, зажать левую кнопку мыши и тащить), либо их можно удалять, нажимая крестик в правом верхнем углу. У некоторых виджетов есть собственные настройки, в зависимости от показываемой информации. Например, виджет «яндекс-пробки» можно настроить на любой город, а так же задать маршрут «работа-дом».

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

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

Чтобы выбрать виджет, наводим на него курсор мышки, появляется кнопка добавить, и кликаем левой кнопкой мыши (кликать не обязательно именно по кнопке, достаточно кликнуть по гаджету или названию).

После этого виджет появляется на главной странице и его можно перетаскивать на место других виджетов. Необходимо выбрать действие — «оставить» или «удалить».

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

В поле для ввода названия города начинаем вводить начальные буквы города и далее выбираем его из выпадающего списка. Самостоятельно город ввести не удастся, только выбирать из списка. Здесь же можно установить город по умолчанию, то есть город будет определяться автоматически. Поставив галочку в пункте «не уточнять мое местоположение», Вам не будут показываться всплывающие окна с вопросом, например, «вы в Москве?» и двумя вариантами ответа — «да» и «нет». После выбора города, нажимаем кнопку «вернуться».