mojwp.ru
Услуги по доработке ваших сайтов >>
Назад

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

Опубликовано: 15.05.2014
15
149

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

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

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

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

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

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

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

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

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

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

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

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

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

Шаг 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 запрещает показывать название сайта.

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

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

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

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

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

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

Послесловие

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 Ответить на сообщение

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

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