ДокументацияAPIСообществоСоздать приложение
Войти

Нравится

Виджет «Нравится» позволяет вашим посетителям одним кликом выразить своё отношение к статье или моментально поделиться ссылкой на статью с друзьями.

Вы всегда можете просмотреть полный список оценивших статью и поделившихся ссылкой на неё с друзьями. Кроме этого по ссылке «К обзору комментариев» вы можете просмотреть все комментарии, оставленные ВКонтакте к размещённым ссылкам.

Показатели различны для каждого уникального адреса на вашем сайте. Если статья на вашем сайте может иметь различные адреса (например, в зависимости от источника перехода, языка или других параметров), то в VK.Widgets.Like последним параметром нужно передавать ваш внутренний идентификатор страницы — page_id. Пример кода с page_id вы найдёте в полной документации к виджету ниже.

Для получения списка пользователей, отметивших страницу через виджет «Нравится», можно использовать метод API likes.getList.

Подключение виджета

Чтобы добавить виджет «Нравится» на сайт, выполните эти шаги:

Шаг 1. В тег <head> на странице вашего сайта добавьте подключение openapi.js:

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

Шаг 2. В тело страницы сайта добавьте код для инициализации Open API:

HTML<script type="text/javascript"> VK.init({ apiId: ВАШ_API_ID, onlyWidgets: true }); </script>

Более подробно про инициализацию транспорта вы можете узнать на этой странице.

В тело страницы добавьте элемент DIV, в котором будут отображаться комментарии, задайте ему уникальный id, и добавьте в него код инициализации виджета. Например:

HTML<div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like('vk_like'); </script>

Этот код добавляет блок «Нравится» стандартного вида. Ширина блока будет подобрана автоматически в зависимости от положения элемента vk_like.

Если на вашем сайте уже используется Open API, добавить виджет ещё проще. Достаточно просто добавить инициализацию виджета.

Дополнительные настройки

Метод VK.Widgets.Like принимает три параметра:

  • •
    element_id (string), обязательный параметр — id элемента, который будет являться контейнером для блока с виджетом. В нашем конструкторе по умолчанию используется значение vk_like.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержать поля:
    • •
      type (string) — дизайн кнопки. Возможные значения:
      • •
        full — кнопка с текстовым счётчиком;
      • •
        button — кнопка с миниатюрным счётчиком;
      • •
        mini — миниатюрная кнопка;
      • •
        vertical — миниатюрная кнопка, счётчик сверху.
    Значение по умолчанию: full.
    • •
      width (integer) — ширина блока в пикселах. Минимальное значение: 200. По умолчанию: 350. Параметр учитывается только для кнопки с текстовым счетчиком (type = "full").
    • •
      height (integer) — высота блока в пикселах. Возможные значения: 18, 20, 22, 24, 30. По умолчанию: 22.
    • •
      verb (integer, [0,1]) — текст надписи на кнопке. Возможные значения: 1 — «Это интересно», 0 — «Нравится». По умолчанию: 0.
    • •
      pageTitle (string) — название страницы для отображения в записи на стене.
    • •
      pageUrl (string) — адрес страницы для отображения у записи на стене. Используйте этот параметр в том случае, если адрес статьи отличается от адреса, на котором отображается кнопка Нравится.
    • •
      pageImage (string) — URL картинки-миниатюры для отображения в записи на стене.
  • •
    page_id (string) — внутренний идентификатор страницы. Используйте pageid, чтобы разместить два и более независимых виджетов на одной странице.

Обратите внимание, что после первого использования виджета значения параметров pageUrl, pageTitle и pageImage могут быть закэшированы и в дальнейшем их изменение не будет влиять на внешний вид публикуемых записей. Кэш сбрасывается при смене параметра page_id. При этом важно иметь в виду, что счётчик виджета привязан к page_id — после изменения этого параметра он также сбросится.

События

При нажатии на кнопку Нравится виджет передаёт события widgets.like.liked и widgets.like.unliked. Вы можете обрабатывать эти события, используя VK.Observer. В функцию-обработчик будет передан один параметр — количество отметок Нравится у текущей страницы. Аналогичным образом передается событие widgets.like.shared при нажатии Рассказать друзьям. В функцию-обработчик также будет передано количество отметок Нравится.

Данные для публикации

В случае, если параметры pageTitle, pageImage не указаны, заголовок страницы и миниатюра будут определены автоматически на основании тегов микроразметки Open Graph. Более подробную информацию о данных для публикации ссылки вы можете найти на этой странице.

Пример использования

HTML<div id="vk_like"></div> <script type="text/javascript"> window.onload = function () { VK.init({apiId: 111, onlyWidgets: true}); VK.Widgets.Like('vk_like', {width: 500, pageTitle: 'Статья номер 321'}, 321); } </script>

Код виджета

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

Сайт/приложение

Варианты кнопки

Высота кнопки

Название кнопки

Код виджета для вставки на сайте