Подключение виджета VK комментарии к страницам сайта

Описываю краткую и быструю инструкцию для базового подключения виджета с комментариями VK к страницам сайта.

Базового подключения, думаю, будет достаточно для 99% людей.

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

1. Заходим на сайт VK для разработчиков в раздел «Создание новых приложений».
2. В пункте Чтобы зарегистрировать новое приложение выбираем Сайт, после чего попадаем в «Мои приложения» в VK ID. Если просит – авторизуемся.

3. Создаем новое приложение:

• На первом этапе указываем название сайта, выбираем платформу Web, при желании загружаем картинку.
• На втором этапе указываем ссылку на сайт в полях Базовый домен и Доверенный Redirect URL. При переходе к третьему этапу у меня попросило код из SMS, возможно у вас также будет.
• На третьем этапе можно выбрать способы быстрого входа или нажать Настроить позже.

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

1. Добавляем в область head подключение openapi.js:

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

2. Также следом в head добавляем код инициализации Open API, в который вместо ВАШ_API_ID подставляем ID приложения из VK ID:

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

3. В том месте сайта, где хотим выводить виджет с комментариями, вставляем следующий код:

   <div id="vk_comments"></div>
   
   <script type="text/javascript">
       VK.Widgets.Comments("vk_comments", {
           limit: 10,
           attach: "*",
           pageUrl: window.location.pathname
       });
   </script>

   Здесь для элемента DIV задаем уникальный id, который указываем ниже в коде инициализации виджета.

   В данном случае в элемент с id ="vk_comments" будет добавлен блок комментариев стандартного вида с 10 последними комментариями. Идентификатор странице будет задан по её URL.

   • limit – количество изначально отображаемых последних комментариев. Максимум – 100.

   • attach – настройка медиа, которые можно прикреплять к комментариям: фото (photo), видео (video), аудио (audio), ссылки (link), граффити (graffiti). По умолчанию указано "*" – всё. Можно указать только конкретные, например: "photo,link".

     Также limit: 10 и attach: "*" являются значениями по умолчанию, так что эти параметры можно вообще не указывать.

   • pageUrl – этого параметра нет в базовых примерах в документации VK, но я рекомендую его добавлять. Это параметр, в который нужно указать URL текущей страницы сайта. По умолчанию он и так равен текущему URL, вот только учитывает параметры. Но вряд ли вы захотите, чтобы на страницах /<ссылка>/ и, например, /<ссылка>/?utm_source=yandex были разные отзывы. А указав в качестве значения window.location.pathname, мы объединяем эти страницы.

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

Результат и пример

После этого у вас появится вот такой блок с виджетом комментариев, которые привязаны к текущей странице сайта, т.е. на каждой странице будут свои комментарии. Примере также можете видеть в конце страницы после текста статьи (буду благодарен за комментарий, если статья оказалась вам полезна☺️).

Если нужно прочитать подробнее о подключении и дополнительных настройках виджета, то можете сделать это в официальной документации на сайте VK для разработчиков.