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

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

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

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

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

Приступим

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

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 на Вашем сайте.

Describing a Widget in HTML Code

Insert the following metatag in the section in the HTML code of each webpage:

Attribute description (both attributes are required):

name is the name of the meta tag yandex-tableau-widget .

content is the description of the logo and color of the widget, and notifiers in the following format: content="logo=logo.png, color=#ffffff, feed=feed.json"

URLencoded .

Widget manifest

Restriction. The size of the manifest.json file must not exceed 100 KB.

Another way to configure a widget is to create a widget manifest file and place a link to it within the tag in the HTML code of each page.

where manifest.json is the path for downloading the widget manifest. It can be relative or absolute:

The absolute path is the full URL of the file. Example: http://sitename.tld/... /manifest.json .

The relative path is the path to the widget manifest relative to the page that the widget is configured for. Example: manifests/manifest.json .

The browser will download the manifest file once a day via the link you entered. If the browser is opened less frequently than once a day, the file will be downloaded every time the browser is restarted.

feed is an optional attribute that specifies the path to the feed.json file with the description of notifiers. The widget is displayed without notifiers if this attribute isn"t included. The path must be URLencoded .

Purpose and format of the feed.json file

Restriction. The size of the feed.json file should not exceed 50 KB.

The feed.json file contains the description of notifiers displayed in the widget and their current values. It is automatically downloaded from the server at a frequency set by the webmaster (by default, every 60 minutes). This allows the notifiers to update. If, during the download, the server returns an incorrect answer three times in a row, the notifier values will be reset to zero.

Restriction. The response to the request for feed.json at the address specified in the manifest must be of the type Content-Type: application / json .

Feed.json is a JSON file with the following structure:

{ "notifications": [ {"": }, //Description of the 1st notifier; the number is an integer or a floating point number (up to two decimal places). {"": }, //Description of the 2nd notifier. {"": }, //Description of the 3rd notifier. ], "refresh_time" : }

where the attribute icon name accepts one of these predefined values:

while the attribute number is the number of non-viewed messages of the selected type. When creating a file, we recommend entering 0 . The attribute value will be updated automatically in the future.

The color of icons is determined automatically; if the widget has a dark background, the notifier will have a light color, and vice versa.

Restriction. A widget can display no more than three notifiers. If the feed file specifies more than three notifiers, the widget will display the first three of them.

Example of the widget description with notifiers

feed.json file

{ "notifications": [ {"bell": 1}, {"friend": 2}, {"message": 1} ], "refresh_time" : 2 }

Values of notifiers to display on the site"s Tableau widget in Yandex Browser

Widget design requirements

You need to define the background color and logotype image for the website widget.

Tip. The background color should correspond to either the company"s signature color or the website"s main background color.

Logotype requirements

The logotype image should meet the following requirements:

Examples of good and poor logotypes

Examples of widget design

Site	youtube.com	yandex.com	bbc.com	twitter.com
Fill color	#3b5998	#ffffff	#000000	#00adec
Widget background
Logo
Result

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

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

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

Новости

Данный виджет отображает новостную ленту, которая разбивается по рубрикам. Изначально он отображает материалы по всем темам со списка, но все же предоставляет доступ к их выбору. Для редактирования нажмите на значок настройки и во всплывающем окне напротив строки «Любимая рубрика» откройте список новостных тем. Выберите интересующую вас позицию и нажмите «Сохранить» . После этого на главной странице будут предоставлены актуальные новости из выбранного раздела.

Погода

Здесь все просто — введите в специальное поле название населенного пункта, погоду которого вам необходимо знать, и кликайте на кнопку «Сохранить» .

Посещаемое

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

Телепрограмма

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

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

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

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

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

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

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

в 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}]}}\">

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

Если пользуетесь Яндекс.Браузером, визуальными закладками в Firefox, IE или Chrome, то, наверняка, замечали, что есть у некоторых сайтов особенность, а точнее несколько:

Не у всех сайтов одинаковые логотипы и названия. У некоторых название отсутствует, а логотип крупнее.
Имеется информер сообщений/заявок в друзья/ответов и прочее

Для тех, кому лень, вкратце - если создать файл с описанием виджета и указать его в шаблоне сайта, то Яндекс.Браузер и Визуальные закладки будут отображать закладку на ваш сайт согласно этому описанию. Вот, что получилось у меня:

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

Как реализовать?

Создаем пустой файл в блокноте (кодировка UTF-8) с названием manifest и расширением json. Указываем версию манифеста и версию API в этом файле:

{ "version": "1", "api_version": 1, }

Добавляем настройки внешнего вида информера: ссылка на логотип, цвет фона, показывать ли заголовок сайта

"layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }

Теперь самое интересное - выводим рейтинг пользователя, который авторизован. Указываем источник API uCoz, формат отдаваемых данных, настраиваем уведомление. Уведомление состоит из названия, иконки (можно указать свои ссылки) и расположение в XML значения рейтинга.

"feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] }

Собираем все вместе:

{ "version": "1", "api_version": 1, "layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }, "feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] } }

Загружаем на сайт и подключаем в head страниц сайта этот файл:

Не забываем задействовать API на своем сайте.

Чтобы увидеть результат, необходимо удалить сайт из закладок и добавить снова.