Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице 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>добавлен в место для вывода виджета комментариев.
После всех манипуляций получаем на сайте красиво оформленный виджет комментариев для ВКонтакте:
Важным моментом является наличие кнопки “администрирование”, которая доступна только администратору и позволяет модерировать комментарии.
Комментарии (4) к “Как установить на сайт виджет для комментариев Вконтакте”
Марина
Здравствуйте.
Как сделать, чтобы виджеты FB и ВК были рядом, а не друг за другом?
Повторяюсь: у вас не работает функция: сообщать мне о новых комментариях…
А пишите вы доступно и без “воды”, спасибо.
Denis Creative
Чтобы они были рядом, нужно прописать пару строк стилей в CSS, например, задать
display: flex;для родителя и прописать нужные свойства для внешнего вида, или прописатьdisplay: inline-box;для форм комментирования и задать фиксированную ширину. В обоих случаях есть небольшие нюансы, но это самые оптимальные варианты для данной задачи.Сергей Нестеровский
Прошу прощения, может быть мой комментарий не в тему, но я всё же поинтересуюсь. Ни кто не в курсе, может быть есть какой-нибудь способ находить сайты с комментариями VK в поисковой выдаче? Мне очень надо.
Denis Creative
Скорее всего можно только в ВК найти сообщества, в которых тянутся комменты с сайта. Но уже давно не пользовался VK, поэтому нет точной информации.