Как добавить кнопку «Нравится» ВКонтакте или Яндекса на сайт магазина

Кнопки «Нравится» от ВКонтакте и Яндекса позволяют покупателям делиться понравившимися товарами с друзьями в российских социальных сетях. Это повышает узнаваемость магазина и привлекает новых посетителей без дополнительных затрат на рекламу.

Кнопка «Мне нравится» ВКонтакте

Получение кода кнопки

1. Откройте страницу генератора виджета: https://vk.com/dev/like

2. Укажите адрес вашего магазина в поле URL страницы.

3. Выберите тип кнопки: Мне нравится, Поделиться или комбинированный вариант.

4. Настройте параметры: высоту кнопки, ширину блока, отображение счётчика.

5. Скопируйте сгенерированный код.

Добавление кода на сайт

Шаг 1: Подключение скрипта ВКонтакте

Вставьте следующий код в главный шаблон сайта перед закрывающим тегом </body>:

<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169" charset="windows-1251"></script>

Шаг 2: Код кнопки

Скопируйте код виджета и вставьте в нужный шаблон:

• чтобы кнопка отображалась на всех страницах — добавьте в главный шаблон;
• чтобы кнопка показывалась только на страницах товаров — добавьте в шаблон товара (product.html).

Пример кода кнопки:

<div id="vk_like"></div>
<script type="text/javascript">
  VK.Widgets.Like("vk_like", {type: "button", width: 350});
</script>

---

Кнопка «Поделиться» Яндекса

Яндекс предоставляет виджет «Поделиться», который позволяет делиться страницами через ВКонтакте, Одноклассники, Telegram и другие сервисы.

Получение кода кнопки

1. Откройте конструктор виджета: https://yandex.ru/dev/share

2. Выберите нужные социальные сети из списка (ВКонтакте, Одноклассники, Telegram и другие).

3. Настройте внешний вид: горизонтальное или вертикальное расположение, размер иконок.

4. Скопируйте сгенерированный код.

Добавление кода на сайт

Шаг 1: Скрипт виджета

Добавьте в шаблон сайта перед закрывающим тегом </body>:

<script src="https://yastatic.net/share2/share.js"></script>

Шаг 2: Контейнер кнопки

Вставьте в нужное место шаблона:

<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram"></div>

В атрибуте data-services перечислите нужные сервисы через запятую. Доступные значения: vkontakte, odnoklassniki, telegram, viber, whatsapp.

---

Совет: Размещение кнопок на страницах товаров наиболее эффективно — покупатель сможет сразу поделиться понравившимся товаром с друзьями прямо со страницы карточки товара.