Рекомендации

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

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

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

Чтобы добавить на свой сайт виджет сообщества ВКонтакте, выполните эти шаги:

Шаг 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_recommend"></div> <script type="text/javascript"> VK.Widgets.Recommended('vk_recommend'); </script>

Этот код добавляет блок рекомендаций стандартного вида. Ширина блока будет подобрана автоматически исходя из положения элемента vk_recommend.

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

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

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

  • •
    elementid (string), обязательный параметр — id элемента, который будет являться контейнером для блока рекомендаций.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержать поля:
    • •
      limit (integer) — максимальное количество страниц, отображаемых изначально. Значение по умолчанию: 5.
    • •
      max (integer) — максимальное количество страниц, отображаемых после нажатия на кнопку «Показать все рекомендации». Если max ⩽ limit, то кнопка «Показать все рекомендации» не будет отображаться. Значение по умолчанию: 4 × limit.
    • •
      period (string) — длительность отчетного периода для статистики. Возможные значения: day — учитываются записи за последние 24 часа, week — 7 дней, month — 30 дней. Значение по умолчанию: week.
  • •
    verb (integer, [0,1]) — вариант формулировки текста внутри блока. Возможные значения: 1 — «Интересно», 0 — «Нравится». Значение по умолчанию: 0.
  • •
    sort (string) — способ сортировки материалов. Возможные значения:
    • •
      friend_likes — по количеству друзей, оставивших отметки «Нравится»;
    • •
      likes — по общему количеству отметок.
    Значение по умолчанию: friend_likes.
  • •
    target (string) — задаёт параметр target у ссылок на страницы сайта. Возможные значения:
    • •
      blank — открывать на новой странице;
    • •
      top — открывать в полном окне браузера;
    • •
      parent — открывать во фрейме, который содержит виджет.
    Значение по умолчанию: parent.

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

HTML
<div id="vk_recommend"></div> <script type="text/javascript"> window.onload = function () { VK.init({apiId: 111, onlyWidgets: true}); VK.Widgets.Recommended('vk_recommend', {limit: 4, max: 10, period: 'month', verb: 1}); } </script>

Код виджета

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

Количество записей
Период выборки
Текст
Код виджета для вставки на сайте
HTML
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?168" charset="windows-1251" ></script> <script type="text/javascript"> VK.init({ apiId: 7794785, onlyWidgets: true }); </script> <!-- Put this script tag to the place, where the Recommended block will be --> <div id="vk_recommended"></div> <script type="text/javascript"> VK.Widgets.Recommended("vk_recommended", {limit: 5}); </script>