Как сделать виджет сайта в браузере Яндекс

Как сделать виджет сайта в браузере YandexДавайте сделаем для своего сайта виджет, который будет виден пользователям в Яндекс.Браузере, а так же у тех, кто установил Визуальные закладки от Yandex.

Минутная работа, которая дополнительно выделит ваш сайт среди конкурентов у пользователей указанного браузера и сервиса.

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

Как сделать виджет сайта в браузере Яндекс

Клик для увеличения

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

Инструкция от самого поискового гиганта на странице API Табло. Я же расскажу своим языком.

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

Шаг 1. У вас должен быть логотип

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

Он должен придерживаться критериев:

  • Ширина макс. 150px.
  • Высота макс. 60px.
  • Прозрачный фон.
  • Формат изображения .png

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

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

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

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

{
"version": "1.0",
"api_version": 1,
"layout":
	{
	"logo": "http://mojwp.ru/wp-content/uploads/banners/mojwp-yandex.png",
	"color": "#0084C8",
	"show_title": false
	}
}

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

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

Теперь закачиваем файл манифеста в корень сайта на хостинге и прописываем внутри секции <head></head> строчку:

<link rel="yandex-tableau-widget" href="/manifest.json" />

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

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

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

http://mojwp.ru/manifest.json

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

Как сделать виджет сайта в браузере Яндекс

Клик для увеличения

Послесловие

API Табло позволяет настраивать появление иконок сообщений если вам кто-то написал сообщение на сайте. Однако это "дебри" для владельцев социалок и т.п. сервисов.

Я же поинтересовался у тех. поддержки Яндекс о возможности подключении сообщений о выходе новых статей через ту же RSS. Ответили мне очень оперативно, в течении дня. Молодцы. Вот их ответ:

Клик для увеличения

Клик для увеличения

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

Будете делать для своего сайта подобный виджет или "забьете болт"?

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 13 комментариев
  1. Серега (2 комм.) says:
    http://volga37.ru/

    Если все ОК, то сразу увИдите результат.

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Благодарю за наблюдательность.
      Быть может у вас есть что сказать по теме статьи?

      • Вадим (13 комм.) says:
        http://av-finance.ru/

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

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          По идее, ровно столько же, сколько "тянет" ваш граватар при комментарии

      • Серега (2 комм.) says:
        http://volga37.ru/

        Думаю в понедельник сделаю также, поскольку тема интересна и дел на 5 минут. Только рассчитано это все, на пользователей яндекс-браузера. =)

  2. Артём Черкасов (83 комм.) says:
    http://zarabotka.guru/

    Закинул в закладочки, определённо пригодится =)

  3. Андрей (129 комм.) says:
    http://zarobitok.ru/

    Отличная статья Виталий, реализовал

  4. Андрей (1 комм.) says:

    10% посетителей с я.браузера, решил запилить. Количество неоплаченных товаров и общая сумма теперь в закладках у пользователей.
    Спасибо

  5. Анатолий (1 комм.) says:
    http://10wmz.com/

    Спасибо за инструкцию, давно хотел так сделать для своего сайта! Мечты сбываются 🙂

  6. Crazy Stalker (1 комм.) says:
    http://allstalkers.com/

    Очень полезная информация, сделаю и на свои сайты. Спасибо Автору!

  7. Дмитрий (1 комм.) says:

    Большое спасибо! Все время выходила ошибка "Не удалось распарсить файл" но благодаря Вашему коду наконец то сделал! Еще раз спасибо!

  8. Sergey (1 комм.) says:
    http://emilia-danilovskaya.wc.lt/

    Спасибо большое! Единственная правильная статья, просто и понятно! Ничего лишнего 😉

  9. Анатолий (2 комм.) says:
    http://15wmz.com

    1. Перестал работать виджет
    2. chrome://tableau-widget - не доступен

    Но многие сайты со своими виджетами - без манифеста в коде сайта

    Как сделать, чтобы работал виджет?

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.93MB | MySQL:81 | 0,513sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html