Как настроить виджеты в яндекс браузере. Свое табло в яндекс браузере
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 на своем сайте.
Чтобы увидеть результат, необходимо удалить сайт из закладок и добавить снова.
Решения для виджетов
Благодаря API uCoz вариантов решений масса, главное помнить, что можно вывести только число. Что это за числа могут быть?
Полное описание API на uCoz находится .
Файл-пример можно скачать здесь - . Если испытываете трудности, пишите в комментариях. Вместе разберемся.
В последних версиях Яндекс.Браузера отсутствуют визуальные закладки. Некоторых пользователей первоначально огорчил данный момент. Однако, не стоит расстраиваться, ведь функции виджетов выполняет Табло яндекс браузер.
Что такое Табло
Эта панелька появляется, если вы откроете новую вкладку или поместите курсор в умную строку. Если табло яндекс браузера не работает, то, скорее всего, появились проблемы в браузере, так как это встроенный элемент интернет-обозревателя. Он представляет собой восемь блоков. Кроме того, здесь расположены полезные ссылки, среди которых История, Закладки, Недавно закрытые страницы.
На Табло по умолчанию установлены виджеты различных сервисов Яндекса, что очень удобно. К примеру, здесь можно просмотреть погоду, пробки и пр . Со временем блоки будут заполняться иконками наиболее посещаемых веб-страниц. При желании, пользователь сможет закрепить в панели те сайты, которые он сам хочет.
Настройки Табло
Несмотря на то, что панель быстрых закладок является очень удобным инструментом, есть те, кто хочет убрать табло в яндекс браузере. В интернет-обозревателе имеются настройки, благодаря которым можно отключить его появление при нажатии на Умную строку. Для этого необходимо перейти в Настройки. Откроется страница, на которой необходимо найти блок, отвечающий за внешний вид обозревателя. Здесь снимаем галочку рядом с пунктом, предлагающим показывать панель при клике на умную строку. После этого вы сможете убедиться, что у вас пропало табло в яндекс браузере. Точнее говоря, оно будет появляться только при открытии новой вкладки.
Если же в яндекс браузер не отображается табло, то, возможно, вам придется . Скорее всего, данная неприятность произошла в результате атаки вредоносных программ. Встречается и такая проблема, у тех, у кого установлен яндекс браузер, не синхронизируется табло. Причиной этого может быть устаревшая версия обозревателя. Следует проверить наличие обновлений для приложения вручную. Как это сделать вы узнаете .
Что делать, если исчезло табло в яндекс браузере, мы с вами узнали. Теперь подробнее рассмотрим настройку этой панели. Для того чтобы работать с ней, необходимо открыть режим редактирования. С данной целью открываем Табло и нажимаем надпись Настройка. После этого у вас появилась возможность прикреплять, удалять, менять местами виджеты. Также можно изменять город и регион в сервисах от Яндекса.
Нужно отметить, что настройки табло в яндекс браузере достаточно простые. Для того чтобы добавить сайт, откройте инструмент и кликните на соответствующую кнопку. Перед вами появится окно, в котором будет предложено ввести адрес ресурса. Если вы не хотите вводить его вручную, то можете найти его в разделе Недавно посещенные. Кроме того, вам будет предложены наиболее популярные ресурсы, в число которых входят социальные сети, почтовые службы и пр. Кстати, на виджете можно будет настроить отображение информации о получении новых сообщений. Для этого зайдите в настройки табло и активируйте опцию Информер.
Если же у вас нету табло в яндекс браузере, то, скорее всего, вы пользуетесь . Хотя некоторые считают, что версия с обычной визуальной панелью закладок была значительно лучше. Ее преимущество можно отметить лишь в том, что прикреплять виджетов можно было большое количество. В Табло есть ограничение в виде 20 виджетов. Несмотря на это, оно достаточно удобное для работы и вполне может пригодиться при различной деятельности в сети, в чем вы можете сами убедиться.
Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.
Манифест для сайта
– это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое
Подробнее
Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.Сначала зафиксируем положение дел до добавления файла манифеста.
После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так 
Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.
Встречайте, manifest.json!
С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.
Генерируй и властвуй.
Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.brucelawson.github.io/manifest - все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.
www.favicon-generator.org - хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).
manifest-validator.appspot.com - этот инструмент предназначен для валидации вашего манифеста.
Результат
Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующиеВсе. Смотрим, что получилось
Иконка:
Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.
Загрузка приложения:
Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.
Сам сайт:
Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.
Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться
Материал устарел.
Что такое Табло в Яндекс брузере? Это та же экспресс-панель, какая бывает и в других браузерах. Собственно, вот вопрос: о чем эта статья и что я тут делаю?
По сути это мелочь, ну, а почему бы и нет?
Здесь я не буду рассказывать о том, как можно добавить в виджет нотификатор (например, количество непрочитанных сообщений), Вы просто сможете использовать свой логотип в табло Яндекс браузера.
Приступим
Добавьте следующий код на всех страницах сайта между
и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. Затем подключаем файл в заголовке страницы, внутри
. Я разместил файл в корневом каталоге, но если хотите — можете использовать другой путь:| 1 | <link rel = "yandex-tableau-widget" href = "/manifest.json" / > |
Содержимое файла:
| 1 2 3 4 5 6 7 8 9 10 | { "version" : "1.0" , "api_version" : 1 , "layout" : { "logo" : "https://сайт/wp-content/themes/lime/images/manifest.png" , "color" : "#e9ffd0" , "show_title" : false } } |
{ "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), т.к. нельзя настроить отступы и цвет шрифта — в моем случае название является частью изображения. А Вы уже сделали виджет своего сайта для табло браузера и визуальных закладок Яндекса?
