У Яндекса под боком, или Как сделать виджет сайта для Яндекса

Создание виджета для Визуальных закладок (для движков WordPress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

Визуально этот сервис являет собой табло со ссылками на сайты. Если туда добавить линк на собственную веб-страницу, в подавляющем большинстве случаев она будет выглядеть невероятно уныло – просто доменное имя на цветном фоне.

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

  • Формат .PNG;
  • Размер 150х60 пикселей;
  • Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

{

“version”: “1.0”,

“api_version”: 1.

“layout”:

{

“logo”: “http://домен_вашего_сайта/адрес_файла_с_логотипом/название_файла_с_лого.png”,

“color”: “#номер_желаемого_цвета_в_HEX”,

“show_title”: false,

}

}

Файл нужно сохранить под названием manifest.json и закинуть в корневой каталог сайта.

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами .

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

Шаг 3. Проверяем

Теперь давайте проверим все ли правильно сделали. Для этого откройте Яндекс.Браузер и в адресную строку вставьте chrome://tableau-widget чтобы появилась строка для ввода URL вашего манифеста. Вставьте в нее:

Здесь указано, что адрес расположения манифеста на моем сайте в корне. Вам остается подставить свои данные. Если все ОК, то сразу увидите результат.

Screenshot_51-300x121.pngКлик для увеличения

Как настроить и добавить новые виджеты в «Ваш Яндекс»

Все, что вы видите на главной странице этой поисковой системы, по сути является виджетами. По умолчанию установлены блоки с картами, погодой, пробками, телепрограммой и т.п.

Внешний вид виджетов Яндекса можно настраивать. Для этого нужно будет выбрать из выпадающего списка шестеренки (живет в правом верхнем углу главной страницы рядом с вашим ником) пункт «Настроить Яндекс»:

После этого рядом со всеми виджетами появятся кнопочки с крестиками и шестеренками. Для удаления блока нужно будет щелкнуть по кресту на том виджете, который вам не нужен. У некоторых из них имеется возможность настройки (у них виден значок шестеренки рядом с крестом). Для сохранения произведенных изменений не забудьте воспользоваться кнопкой «Сохранить», которая находится в правом верхнем углу окна.

Например, виджет пробок можно отрегулировать так, чтобы он показывал время и плотность движения по указанному вами маршруту (например, на работу или домой).

Перетаскивать блоки по главной странице Yandex.ru можно, удерживая левую кнопку мыши (находясь, естественно, в режиме редактирования, когда рядом с блоком видны крестики и шестеренки).

Можно также добавлять новые виджеты на главную с помощью соответствующей кнопки, которая в режиме редактирования расположена вверху окна слева. То же самое можно сделать, выбрав третью вкладку личных настроек под названием Добавить виджет.

В результате откроется окно со всевозможными виджетами от разных производителей (блоки от самого Яндекса скромно расположились в самом низу):

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

Последнее время на главной страницы стал еще выводиться блок «Яндекс Дзен», где посетителям предлагаются индивидуальные подборки новых материалов появившихся в интернете. Из всех настроек этого блока вам будет доступно только его сворачивание.

Виджет Facebook

Социальные сети плотно вошли в повседневную жизнь современного человека. Правда, в «наших широтах» наиболее распространены «ВК» и «Одноклассники». Однако Facebook – лучшее место для продвижения сайта, особенного предлагающего какие-либо товары или услуги.

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

Разработчики Facebook прекрасно понимают, что владельцы информационных порталов предпочитают пользоваться именно их социальной сетью, и потому значительно упрощают процесс создания и размещения виджетов.

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта. Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

  1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
  2. Пролистать страницу до конца и открыть «Разработчикам»;
  3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
  4. Затем требуется выбрать «Социальные плагины»;
  5. Найти Like Box;
  6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
  7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Шаг 2. Создаем файл манифеста API Табло

Файл манифеста — это то место, где вы пропишите путь до картинки своего логотипа для виджета, а также фон самого виджета.

Создаем новый файл и называем его manifest.json (json — это его расширение, как txt, doc, psd и прочие). Внутри данного файла у вас будет следующее:

Немного пояснений:

  • version»: «1.0» — это номер версии вашего манифеста. Можете оставлять как есть сейчас 1.0. Главное не начинать с 0, т.к. он не будет поддерживаться.
  • api_version»: 1 — это ферсия api у Яндекс Табло. Оставляем как есть.
  • «logo»: — это путь до логотипа, который вы ранее создали (Шаг 1). Его вы должны закачать куда-либо в сеть и тут прописать путь до него.
  • «color»: — это цвет фона самого виджета. Если глянете на первую картинку, то там у меня сам виджет синий. Здесь он и задается. Подберите для себя подходящий. Можно воспользоваться пипеткой от FastStone Capture
  • «show_title» — выводить или нет название сайта в виджете. У меня на картинке выводит, поэтому должно стоять значение true. В свою очередь false запрещает показывать название сайта.

Для WordPress это будет файл header.php, где вы сможете вставить нужное. Поищите и можете прямо перед ним разместить указанною строку.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий