mojwp.ru
Назад

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

Опубликовано: 15.05.2014
16
2278

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{
"version": "1.0",
"api_version": 1,
"layout":
	{
	"logo": "https://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> строчку:

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

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

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

https://mojwp.ru/manifest.json

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

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

Послесловие

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

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

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

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

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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Серега
    Опубликовано: 15.05.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 16.05.2014 Ответить на сообщение

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

      • Вадим
        Опубликовано: 16.05.2014 Ответить на сообщение

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

        • Виталий
          Опубликовано: 16.05.2014 Ответить на сообщение

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

      • Серега
        Опубликовано: 16.05.2014 Ответить на сообщение

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

  • Артём Черкасов
    Опубликовано: 18.05.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 19.05.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 10.01.2015 Ответить на сообщение

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

  • Анатолий
    Опубликовано: 11.01.2015 Ответить на сообщение

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

  • Crazy Stalker
    Опубликовано: 11.01.2015 Ответить на сообщение

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

  • Дмитрий
    Опубликовано: 02.02.2015 Ответить на сообщение

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

  • Sergey
    Опубликовано: 17.02.2015 Ответить на сообщение

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

  • Анатолий
    Опубликовано: 21.07.2015 Ответить на сообщение

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

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

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

  • Анатолий
    Опубликовано: 22.12.2016 Ответить на сообщение

    Статью будете переписывать или править?
    Изменились правила создания виджетов

    • Виталий
      Опубликовано: 22.12.2016 Ответить на сообщение

      Пока не до этого) Позже. Спасибо за подсказку.

  • Лев
    Опубликовано: 19.09.2019 Ответить на сообщение

    и у меня получилось всё 🙂

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.