Blogger-man та цифровізатор рідної громади!
Ігор Петренко
Всем привет! 😍
Давно с вами не слышались и не виделись, дорогие друзья. Сегодня я хочу вам показать, как я делал красивое превъю IPetrenko.com для Табла в Яндекс.Браузере.
Внутри тега <head> нужно вставить следующий код (например, после строки вызова favicon.ico):
В этом коде нужно изменить значение следующих атрибутов:
logo= - это путь до логотипа, который вы ранее создали. Его вы должны закачать куда-либо в сеть и тут прописать путь до него.
color= - это цвет фона самого виджета.
Например у меня получилась такая строчка:
В конце предлагаю небольшой ролик про Великого человека по имени Никола Тесла, без которого мы могли бы и не встретиться в глобальной сети. До встречи ;)
Давно с вами не слышались и не виделись, дорогие друзья. Сегодня я хочу вам показать, как я делал красивое превъю IPetrenko.com для Табла в Яндекс.Браузере.
Зачем этот виджет?
Если честно, то уже полгода мои глаза страдали от того, что в визуальных закладках на Яндекс.Браузере мой блог отображается оооочень коряво: синий (мой) фон плашки, favicon в кружочке и название сайта.. Но почему у других сайтов, которые у меня на том же табле - всё красиво? Я решил с этим разобраться.Сразу предупреждаю: показываю как делать виджет, в котором есть только логотип и фон. БЕЗ УВЕДОМЛЕНИЙ (нотификаторов). Именно красивое превью моего сайта мне и нужно. А вам?Также уточню, что моя инструкция основна на рекомендациях API Яндекс.Табло и не требует файла manifest.json. А это особенно важно, для тех кто владеет сайтом на бесплатной платформе типа Wordpress или Blogspot.
Что нужно для отображения виджета/превью?
1. Логотип
В обязательном порядке нужно иметь логотип вашего сайта с прозрачным фоном в формате *.png. Что касается размеров логотипа:- квадратные логотипы могут быть до 120 пикселей в высоту;
- длинные горизонтальные логотипы — ширина до 300 пикселей, высота до 85 пикселей;
- короткие горизонтальные логотипы — ширина до 250 пикселей, высота до 120 пикселей.
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=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IJN7nbkyGqJgy0yF3xOBO_MSFPjr0-zlAFg1AGqkrGw_wTlRwD9ixSeiwQ8Bvcpg3sbKj6f7KkwnGsWaS-8fQnNVy_aEKpPbsazUZL3jlNTEhPfp_QZg0g4Bv7yRYkvSB1OaYi3ZW7o/s1600/logo_ip.png, color=#212df3" />
Что теперь?
А теперь главное: дождитесь обновление виджета. У меня это занимало около 5 минут, а иногда даже меньше. Периодически чистите кеш браузера и самого сайта (в браузере). И ву-аля — Вы восхитительны.В конце предлагаю небольшой ролик про Великого человека по имени Никола Тесла, без которого мы могли бы и не встретиться в глобальной сети. До встречи ;)
Привет. Можешь сделать туториал как добавить виджет на фесбук и прочие соц сети в блог? А то хотле сделать виджет на группу в фейсбуке но не получается а в инете все статьи старые и не рабочие.
ВідповістиВидалитиПривет. Извините за задержку с ответом. Сделаю в ближайшее время ;)
ВідповістиВидалити