Новости

Создание виджета сайта в визуальных закладках

05.09.2018

Доброго времени суток всем читателям блога SEOBID.NET! Не так давно один мой знакомый попросил меня разобраться с содержанием виджетов Яндекса, в том числе и с виджетом визуальных закладок в Яндекс Браузере. А именно – он хотел поменять стандартный виджет в визуальных закладках на свой, благо, возможности для этого предоставлены API Табло от Яндекса. Мне эта мысль показалась интересной, и я взялся за работу.

Практической ценности в этом я не увидел никакой, кроме той, что постоянные посетители вашего сайта, привыкнув к его логотипу, будут быстрее его узнавать и, возможно, установят ваш сайт в визуальные закладки своих браузеров. Ну и, конечно, этим вы потешите свое тщеславие и самолюбие – виджет сайта во всех (почти во всех) браузерах!

Как установить визуальные закладки для Google Chrome

Виджет я установил только вчера, и на сегодняшний день он обновился только в Mozilla и в Файерфоксе. Возможно, для остальных браузеров требуется больше времени, или просто нужно несколько раз почистить кэш, чего я пока делать не хочу – много разных полезностей у меня в кэше спрятано.

Как создать экспресс панель в Internet Explorer

Для тех, кто еще не понял, о чем речь, покажу стандартную картинку визуальных закладок Яндекс Браузера:

Вот так выглядят стандартные виджеты сайтов, которые вы сохраняете в визуальных закладках. Не очень красиво, но достаточно информативно – по иконке и адресу сайта можно узнать тот ресурс, который вам нужен. Новый виджет выглядит немного красивее, что уже само по себе будет запоминаться на фоне почти одинаковых стандартных виджетов. Ну, например, вот так:

Именно эту картинку я и поставил вчера вместо стандартной по просьбе клиента. Сразу понятно, о чем речь, да и логотип что-то напоминает, не правда ли? Качество СССР – вот что хотел я сказать этим логотипом. Теперь такую картинку будут видеть все, кто захочет оставить этот сайт в визуальных закладках. Думаю, вам будет интересно, как можно добиться такого результата. Это совсем несложно (по моим меркам), и я как можно подробнее опишу все действия.

Итак, как я уже говорил, пользователи с браузерами, имеющими в функционале визуальные закладки, смогут увидеть ваш новый виджет. Это Мозилла, Яндекс Браузер, Google Chrome, Internet Explorer, конечно (да, в нем тоже можно установить визуальные закладки, хотя опционально их и нет), и еще несколько малоизвестных браузеров. Делается это при помощи API Табло, и инструкцию от Яндекса вы можете почитать здесь , а я постараюсь объяснить все своими словами.

Поэтому, каким бы вы браузером ни пользовались, вам это пригодится в смысле привлечения посетителей на сайт. Что можно изменить в этом виджете?

Можно изменить фон виджета для сайта на любой. Можно вставить свой логотип – он должен быть обязательно в формате PNG, иметь размер 150х60 px и обязательно быть с прозрачным фоном. Также вы можете сделать вывод значков для разных уведомлений, но я не стал этого делать. Точнее, я попробовал, но все получается слишком мелким, неприятным на вид и расплывчатым в общей массе.

Чтобы сделать свой виджет, вам нужно будет создать новый файл с именем manifest и с расширением json. То есть – файл manifest.json. Его необходимо будет положить в корень сайта – это там, где лежит ваш robots.txt, и заполнить его таким кодом:

{ "version": "1.0", "api_version": 1, "layout": { "logo": "http://вашсайт.ru/wp-content/themes/тема/images/logo.png", "color": "#сссссс", "show_title": false } }

А подключается к вашему сайту этот файл очень просто – в файле header.php вашего шаблона темы, между тэгами <head> и </head> нужно вставить такую строчку:

Теперь о том, что содержит код файла manifest.json:

version — версия виджета. Здесь вы можете указать любую цифру или число, хоть год своего рождения. Это будет всего лишь означать версию виджета. api_version — номер версии API Табло. На сегодняшний день есть только версия 1. logo — абсолютный (то есть, полный) адрес, где лежит ваша картинка. Требования к логотипу я уже обрисовал выше. color — цвет фона виджета, поскольку логотип делается обязательно с прозрачным фоном. show_title — вывод заголовка сайта. Можно указать либо false — не показывать, либо true — показывать. Если заголовок слишком длинный (как в моем примере), то лучше его не выводить – будет смотреться коряво. Поэтому заголовок я сразу нарисовал в логотипе.

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

Будем считать, что через 12 часов – я вечером сделал виджет, а утром он уже был в закладках Мозиллы. В Яндекс Браузере он тоже обновился только утром. Но, чтобы убедиться в работоспособности вашего нового виджета, совсем не обязательно ждать столько времени. Есть быстрый способ.

Просто вбейте в адресную строку в Яндекс Браузере (в других браузерах эта фишка не сработает — пробовал) адрес chrome://tableau-widget и скопируйте в открывшееся адресное поле адрес вашего нового файла manifest.json, после чего нажмите кнопку «Проверить»:

Если в файле все правильно, то вы увидите подпись «Манифест виджета верен». Можете также сразу попробовать добавить сайт в визуальные закладки – если его там раньше не было, то новый виджет появится сразу, а если он уже присутствовал в закладках – попробуйте несколько раз кэш почистить, возможно, виджет сразу обновится. Но мне пришлось ждать несколько часов.

По крайней мере, хоть я и не дизайнер, но моего знакомого этот виджет порадовал, и он остался доволен – и логотип есть, и заголовок сайта присутствует, и цветовая гамма соблюдена, почти как на сайте. Так что дерзайте – работы немного, а результат, как говорится, на лице ???? . И до встреч в новых публикациях!