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

Всем привет! 😍
Давно с вами не слышались и не виделись, дорогие друзья. Сегодня я хочу вам показать, как я делал красивое превъю IPetrenko.ru для Табла в Яндекс.Браузере.

Как добавить свой виджет сайта в Яндекс.Браузер?


Зачем этот виджет? 

Если честно, то уже полгода мои глаза страдали от того, что в визуальных закладках на Яндекс.Браузере мой блог отображается оооочень коряво: синий (мой) фон плашки, favicon в кружочке и название сайта.. Но почему у других сайтов, которые у меня на том же табле - всё красиво? Я решил с этим разобраться.
Сразу предупреждаю: показываю как делать виджет, в котором есть только логотип и фон. БЕЗ УВЕДОМЛЕНИЙ (нотификаторов). Именно красивое превью моего сайта мне и нужно. А вам?
Также уточню, что моя инструкция основна на рекомендациях API Яндекс.Табло и не требует файла manifest.json. А это особенно важно, для тех кто владеет сайтом на бесплатной платформе типа Wordpress или Blogspot.

Что нужно для отображения виджета/превью?

1. Логотип

В обязательном порядке нужно иметь логотип вашего сайта с прозрачным фоном в формате *.png. Что касается размеров логотипа:
  • квадратные логотипы могут быть до 120 пикселей в высоту; 
  • длинные горизонтальные логотипы — ширина до 300 пикселей, высота до 85 пикселей;
  • короткие горизонтальные логотипы — ширина до 250 пикселей, высота до 120 пикселей.
Если у вас свой хостинг - заливайте файл в корень сайта. Если вы владелец блога/сайта на Blogger, то загрузите в любой пост и скопируйте ссылку на изображение для следующего пункта.

2. Подключаем показ превью для визуальных закладок

Логотип есть, фон логотипа я думаю у вас также есть (или можете выбрать в статье Лучшие цвета HTML для веб-мастера в одной таблице (HEX и RGB). Теперь осталось написать одну строчку в коде страницы. И почти готово.

Внутри тега <head> нужно вставить следующий код (например, после строки вызова favicon.ico):
<meta name="yandex-tableau-widget" content="logo=http://site.com/logo-tablo.png, color=#FF2A75" />

В этом коде нужно изменить значение следующих атрибутов:
logo= - это путь до логотипа, который вы ранее создали. Его вы должны закачать куда-либо в сеть и тут прописать путь до него.
color= - это цвет фона самого виджета.

Например у меня получилась такая строчка:
<meta name="yandex-tableau-widget" content="logo=http://1.bp.blogspot.com/-JjgOfX5FsNw/WWPryk09EBI/AAAAAAAAMg8/vjJR_oV1bs8NYQnTUisGYqYB5RlJPugFACK4BGAYYCw/s1600/logo_ip.png, color=#212df3" />

Что теперь?

А теперь главное: дождитесь обновление виджета. У меня это занимало около 5 минут, а иногда даже меньше. Периодически чистите кеш браузера и самого сайта (в браузере). И ву-аля — Вы восхитительны.

В конце предлагаю небольшой ролик про Великого человека по имени Никола Тесла, без которого мы могли бы и не встретиться в глобальной сети. До встречи ;)

Комментарии

  1. Привет. Можешь сделать туториал как добавить виджет на фесбук и прочие соц сети в блог? А то хотле сделать виджет на группу в фейсбуке но не получается а в инете все статьи старые и не рабочие.

    ОтветитьУдалить

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

Популярное

Установка и настройка модема Huawei HG532e (+ мини-обзор)

Виджет профиля Instagram на ваш сайт/блог

14 лучших шаблонов для Blogger в 2015 году [выпуск 2]