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

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

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

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


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

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

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

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

Метки: виджет, Яндекс API, Яндекс.Браузер

Поделитесь материалом с другими, воспользуйтесь этими кнопками:
Получать обновления и новые материалы блога по E-mail

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

  1. Валентина:

    Видела на сервисе Яндекса, это новшество, но не совсем поняла, что это даст. Положила в закладки, думаю вернусь к данной теме. Благодарю за содержательную статью.

    Ответить

Оставить комментарий

Уважаемые посетители, пожалуйста, пишите осмысленные и исчерпывающие комментарии. Короткие фразы типа «спасибо автору», «возьму на заметку», «мне помогло» и т.п. будут удаляться. Исключение, когда Вы отвечаете на чей-то вопрос или благодарите за помощь.

Ссылки на Ваш сайт получат статус DoFollow после третьего комментария.

Для вставки кода в комментарии можно использовать BB-коды:
[text] [/text], [php] [/php], [html] [/html]

Подписаться на обновления блога 4remind.ru по RSS
Новости блога в социальных сетях

4remind.ru - персональный блог вебмастера



Наверх
Наверх