Как настроить виджеты в яндекс браузере. Настраиваем виджеты на стартовой странице яндекса. Что такое виджеты Яндекса

Эта заметка посвящается использованию Яндекс API Табло для сайтов, а точнее она будет полезна владельцам сайтов, которые хотят создать специальный виджет своего сайта для использования в Яндекс.Браузере и расширении «Визуальные закладки».

Многие конечно видели как выглядят визуальные закладки сайтов в Яндекс.Браузере, когда нажимается кнопка «Новая вкладка». Визуальные закладки некоторых сайтов, таких как например Яндекс , YouTube, GMail выглядят очень симпатично, а большинство персональных сайтов, да и не только персональных, смотрятся довольно убого. Так вот чтобы каждый начинающий вебмастер смог быстро и легко создать симпатичный виджет своего сайта и публикуется эта заметка. Конечно же на сайте api.yandex.ru есть документация, но ее многие новички просто боятся или ленятся читать. По инструкции в этой заметке всего за 4 шага создадим самый простой виджет API Табло для своего персонального сайта. Итак, поехали.

1. Создаем картинку-логотип виджета сайта

В любом графическом редакторе создаем картинку с максимальной шириной 150 пикселей и максимальной высотой 60 пикселей, с прозрачным фоном и сохраняем ее в файл обязательно формата PNG с именем ya-manifest.png .

2. Создаем файл Манифеста виджета сайта

Не стоит пугаться, Манифест виджета - это простой текстовый файл типа JSON. Так что любым текстовым редактором создаем такой файл:

{ "version": "1.0", "api_version": 1, "layout": { "logo": "http://ВАШ_ДОМЕН/ya-manifest.png", "color": "#003C50", "show_title": false } }

и сохраняем его с именем ya-manifest.json . Только не забудьте вместо «ВАШ_ДОМЕН» вписать домен вашего сайта, а в поле «color» вставить код цвета для фона вашего виджета. В поле «show_title» можно при желании поставить в «true», если хотите, чтобы в виджете под картинкой выводилась строка названия вашего сайта, но если параметр «title», т.е. само название у вашего сайта очень длинное, то этого делать не стоит, иначе в виджете будет показано обрезанное название.

3. Закачиваем файлы картинки-логотипа и манифеста на сайт

Используя FTP закачивайте оба созданных вами файла ya-manifest.png и ya-manifest.json в корневой каталог вашего сайта.

4. Добавляем ссылку на манифест в заголовке главной страницы сайта

Ссылку на манифест вашего виджета нужно разместить в файле, который выводит заголовок страниц вашего сайта, особенно главной страницы, внутри тега. Например для сайтов на движке WordPress оптимальным решением будет размещение ссылки в файле header.php текущей темы сайта. Ее код будет таким:

Важно, чтобы в параметре «href» был указан правильный путь к созданному вами файлу манифеста ya-manifest.json . На этом собственно создание виджета вашего сайта завершено.

Проверка виджета в Яндекс.Браузере

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

Приведенная в этой заметке инструкция по созданию виджетов для сайтов на основе Яндекс API Табло конечно же не описывает все возможности и настройки виджетов, поэтому те, кто хочет использовать все по максимуму, могут обратиться к документации по адресу http://api.yandex.ru/tableau/doc/.

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

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

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

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

\n

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

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

Самым популярным сайтом-поисковиком в мире стал «Google», однако среди русскоязычных пользователей первое место стабильно занимает «Яндекс».

Думаю, это как раз тот случай, когда стоит последовать за большинством.

Давайте рассмотрим поближе, какие «удобства и вкусности» нам предлагает Яндекс.

Поисковый сайт Яндекс начинает «общение» с нами при помощью основного своего интерфейса — . Чтобы открыть её, нужно набрать в адресной строке любого браузера yandex.ru :

Поиск сайта yandex.ru

Поисковик продемонстрирует нам свою главную страницу. Здесь можно найти новости, биржевые сводки, погоду и многое-многое другое.

Однако, не многие пользователи обращают внимание на то, что главную страницу самого популярного поисковика можно настроить «под себя».

Что такое виджеты Яндекса.

Главная страница yandex.ru состоит из блоков с информацией, которые и являются виджетами. Некоторые виджеты представляют из себя небольшие приложения — часы, календарь и т.д. Остальные — это ссылки на популярные информационные и развлекательные ресурсы (сайты).

Вся свежая информация появляется на сайте и отображается в виджете. Поэтому можно увидеть множество обновлений, не выходя с главной страницы поисковика.

Вот так выглядит страница поисковика по умолчанию:

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

Как установить виджеты Яндекса.

Сначала проверим функции удаления и настройки имеющихся блоков.

Для начала нужно зайти в Настройки => Настроить Яндекс .

У виджетов появился серый фон, обозначающий их границы, кнопочки настройки (шестерёнки) и удаления блока (крестик).

С удалением, думаю, вопросов не возникнет: не нужен блок — щёлкаем по крестику ЛКМ, виджет удаляется.

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

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

Каталог виджетов.

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

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

Например:

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

Дальнейшие действия проделываем на основной странице. Нам ещё раз предлагается сделать выбор — оставить выбранный блок или удалить. Если визуальный интерфейс нас устраивает, подтверждаем кликом ЛКМ на Установить .

После выбора всех интересных виджетов, нужно найти для них наилучшее месть на странице. Эта опция доступна сразу после входа в настройки Яндекса. Чтобы переместить информационный блок, нужно навести видоизменённый курсор на тот виджет,который собираемся двигать, зажать его ЛКМ и передвинуть в нужном направлении.

А на сегодня о виджетах всё. Приятной вам навигации.

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

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

Как Вы видите, некоторые закладки (Вконтакте, HelpF.pro, mail.ru) отображаются красиво, а некоторые - кружок с favicon и название:(

В этот статье мы расскажем Вам как настроить красивое отображение сайта в табло Яндекс.Браузера:

Как создать виджет сайта для табло Визуальных закладок

Мы покажем Вам как это сделать на примере нашего сайта - сайт - Web First Consultant

Мы сможем:

• изменить фон виджета для нашего сайта;
• добавить свой логотип;
• настроить вывод значков различных уведомлений.

Для этого необходимо выполнить следующие действия:

• Создать манифест виджета.
• Разместить ссылку на манифест на каждой странице сайта (в HTML-коде страницы внутри тега).

Создание манифеста

Манифест - это JSON-файл определенной структуры, для нашего сайта мы сделали его таким:

{ "version": "1..png", "color": "#fefefe", "show_title": false }, "feed": { "url": "http://сайт/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 - URL, по которому можно загрузить манифест виджета.

Мы на своем сайте указали это так:

В результате мы получили:

Проверка отображения виджета

Виджеты в Табло обновляются с определенным интервалом, поэтому чтобы сразу увидеть свои изменения, воспользуйтесь служебной страницей browser://tableau-widget

Вот так она выглядит для нашего сайта:

И так, после не сложных настроек, которые можно сделать за 5 минут, получилось следующее:

Данная настройка не займет у вас много времени, но явно улучшит отношение пользователей в Вашему сайту!

Если у вас не получается настроить это самостоятельно, то Вы всегда можете обратиться к нам за помощью:

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