Search
Generic filters

Виджет отзывов на сайт “Яндекс Карты”: как настроить бесплатно

Виджет отзывов на сайт "Яндекс Карты": как настроить бесплатно Разработка сайтов

Не секрет, что одним из решающих факторов, отвечающих за конверсию сайта, является наличие отзывов клиентов. Хочется порой поставить отзывы чуть ли не вторым блоком на главной 🙂 При этом бесплатный виджет отзывов на сайт “Яндекс Карты” может стать отличным решением, убивающим сразу несколько зайцев:

  • Повышение конверсии сайта при наличии положительных отзывов;
  • Служит элементом поисковой SEO-оптимизации сайта за счёт увеличения времени нахождения посетителя на сайте;
  • Увеличивает кликабельность (CTR) сайта в поисковой выдаче Яндекс;
  • Способствует продвижению бизнеса клиента в поисковой системе Яндекс за счёт увеличения рейтинга аккаунта;
  • Избавляет от необходимости обновлять контент сайта скриншотами из социальных сетей и мессенджеров, а то и того хуже – выдуманными отзывами, не вызывающими доверия .

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

Сайты моих клиентов с виджетом отзывов “Яндекс Карты”

Виджет отзывов на сайт "Яндекс Карты": как настроить бесплатно

  • Сайт по ремонту стартеров и генераторов в Москве https://exp77.ru/

Как настроить виджет отзывов для сайта

  1. Идём в сервис Яндекс карт по ссылке https://yandex.ru/maps/.
  2. Находим нужную нам организацию, пусть это будет один из моих клиентов, сайт которого привожу в пример, – гостиница “Три павлина” в Абхазии, жмём три точки в правом верхнем углу:Виджет отзывов на сайт "Яндекс Карты": как настроить бесплатно
  3. В выпадающем меню выбираем кнопку “Поделиться”.
  4. Копируем код виджета с отзывами для сайта. При желании можно включить предпросмотр отображения виджета:
  5. Теперь идём на свой сайт и вставляем в нужное место код виджета.

Редактирование кода виджета для адаптивного сайта

Изначально код виджета неадаптивный, и в целом стили Iframe, в котором он находится, не подлежат редактированию. Но можно максимально адаптировать данный виджет к мобильным устройствам с тем, чтобы он “тянулся” и подстраивался под ширину экрана. Поскольку Iframe не редактируются, будем рассматривать только div-блок в самом начале кода, в котором и выводится Iframe (выделен жирным шрифтом):

<div style=”width:560px;height:800px;overflow:hidden;position:relative;”></div>

Встроенные стили этого блока я редактирую следующим образом:

  1. Максимальную ширину 560px заменяю на 750px “width:750px” (данная ширина позволяет отображать виджет на максимальную ширину на десктопах);
  2. Встроенные стили дополняю свойством CSS для адаптивности: “max-width:100%” (задавая максимальную ширину, делает виджет резиновым на мобильных устройствах);
  3. В итоге div будет выглядеть следующим образом:
    <div style=”width:750px;height:800px;overflow:hidden;position:relative;max-width:100%”></div>
  4. Как результат, виджет будет отображаться на сайте следующим образом:
Оцените статью
Блог вебмастера Анны Хоменко