Как создать виджет Яндекс API Табло для сайтов

Эта заметка посвящается использованию Яндекс 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. Добавляем ссылку на манифест в заголовке главной страницы сайта

Ссылку на манифест вашего виджета нужно разместить в файле, который выводит заголовок страниц вашего сайта, особенно главной страницы, внутри тега

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

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

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

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