🔥 Последнее
Загрузка...

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



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


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


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

Если честно, то уже полгода мои глаза страдали от того, что в визуальных закладках на Яндекс.Браузере мой блог отображается оооочень коряво: синий (мой) фон плашки, 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 минут, а иногда даже меньше. Периодически чистите кеш браузера и самого сайта (в браузере). И ву-аля — Вы восхитительны.

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

Чуть не забыл! Мои дорогие друзья и читатели!

Я недавно завел
блог ToDo.ipetrenko.com, где делюсь своими мыслями по поводу продуктивности, отношений, книг и вообще жизни. Стараюсь не писать всякую неинтересную... статью ;) Вообщем, Blogger'ом единым живу, так что буду рад каждому из вас;)




Комментарии

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

    ОтветитьУдалить
  2. Привет. Извините за задержку с ответом. Сделаю в ближайшее время ;)

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

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

Популярные сообщения из этого блога

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

Как узнать id (идентификатор) поста или страницы в Blogger?