Как установить на сайт виджет для комментариев Вконтакте

Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице http://vk.com/dev/Comments, обязательно нужно быть залогиненным под аккаунтом того человека, который в дальнейшем будет вести модерацию этих комментариев. То есть, если разработчик делает сайт для третьего лица, то при регистрации виджета нужно использовать аккаунт заказчика.

Итак мы на странице http://vk.com/dev/Comments. Настроек очень мало, что сильно облегчает работу. Нам нужно ввести Название сайта, Адрес сайта, Основной домен сайта (сформируется из Адреса сайта), выбрать Тематику сайта, отметить необходимое Количество комментариев для вывода на странице (5 или 10 вполне достаточно), выбрать необходимые Медиа-возможности и указать ширину виджета, которая зависит от макета, в который виджет будет устанавливаться.

Настройка виджета для комментариев Вконтакте
По умолчанию отмечен чекбокс Медиа — Включить расширенные комментарии, это позволяет комментаторам использовать Граффити, Фотографии, Видео, Аудио и Ссылки в комментариях. Если же нужно отключить какие-то параметры медиа, то при нажатии на Подробнее, Вы получите полный список используемых медиа настроек. В дальнейшем, при настройке виджета на сайте можно подключать и отключать нужные функции медиа в коде, используя вместо attach: "*", например, код в котором перечислены необходимые параметры для медиа attach: "graffiti,photo,audio,link" (отключено Видео).

Настройка медиа для виджета комментариев Вконтакте

Но это я забежал чуть вперед.

После настройки всех необходимых параметров жмем «Сохранить«. После сохранения виджета ниже в окне вы получаете готовый код, который выглядит примерно так:

Код для виджета комментариев Вконтакте

Здесь все просто, код который отмечен комментарием Put this script tag to theof your page добавляем в код своего сайта перед закрывающимся тегом </head>, для сайтов на CMS WordPress этот код нужно добавить в файл header.php.

А код, который отмечен комментарием Put this div tag to the place, where the Comments block will be нужно добавить в то место своего сайта, в котором виджет с комментариями должен выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php.

Подводим итог

Код

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>

<script type="text/javascript">
  VK.init({apiId: 4503885, onlyWidgets: true});
</script>

добавлен перед </head>.

А код

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 5, width: "550", attach: "graffiti,photo,audio,link"});
</script>

добавлен в место для вывода виджета комментариев.

После всех манипуляций получаем на сайте красиво оформленный виджет комментариев для ВКонтакте:
Пример работы виджета для комментариев ВКонтакте на рабочем сайте

Важным моментом является наличие кнопки «администрирование», которая доступна только администратору и позволяет модерировать комментарии.

Ошибка 403 forbidden после переноса Joomla-сайта на другой хостинг

В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они…

Как добавить видео на свой сайт с использованием тега video в html5

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

Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…

Как увеличить скорость загрузки страниц на сайте

На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…

4 комментария

Марина

Здравствуйте.

Как сделать, чтобы виджеты FB и ВК были рядом, а не друг за другом?

Повторяюсь: у вас не работает функция: сообщать мне о новых комментариях…

А пишите вы доступно и без «воды», спасибо.

Чтобы они были рядом, нужно прописать пару строк стилей в CSS, например, задать display: flex; для родителя и прописать нужные свойства для внешнего вида, или прописать display: inline-box; для форм комментирования и задать фиксированную ширину. В обоих случаях есть небольшие нюансы, но это самые оптимальные варианты для данной задачи.

Сергей Нестеровский

Прошу прощения, может быть мой комментарий не в тему, но я всё же поинтересуюсь. Ни кто не в курсе, может быть есть какой-нибудь способ находить сайты с комментариями VK в поисковой выдаче? Мне очень надо.

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

Ответить