Как добавить комментарии от vk.com (ВКонтакте) к себе на сайт?

Содержание статьи:

1) Как установить виджет комментариев VK
2) Если в блоке комментариев на одной странице отображаются сразу все комментарии сайта
3) Как самому прикрепить идентификатор страницы
4) Другие настройки

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

1) переходим по ссылке в раздел для разработчиков vk
http://vk.com/dev/sites
Если открылось общее окно для разработчиков, то Приложения - Виджет комментариев (справа)

2) Если Вы до этого не регистрировали сайт для Виджетов VK, то ищем пункт Добавить новый сайт. Ниже вписываем ваш сайт, пример, yoursite.ru. Вторая строчка заполняется автоматом. В третью можете вписать то же, что и в первую.


3) Далее выбираем максимальное кол-во комментариев на страницу в поле Количество комментариев, ставим галочку в Медиа, если хотим, чтобы пользователь мог оставлять в комментах музыку, граффити и тп., Ширину выбираем согласно свободному месту на Вашем сайт под Виджет Целиком.


4) Остаётся только скопировать Код к себе на сайт!



Эту часть в head

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

А эту в body в нужное для комментариев место

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

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

Проверьте, вставился ли Ваш ID, который Вы получили при регистрации сайта, в последнюю часть кода.
Готово!

Если у Вас отображаются комментарии сразу всех страниц Вашего сайта в одном блоке

Бывает и так, что автоматическая идентификация в случае с некоторыми динамическими страницами не работает и комментарии со всех страниц видны в каждом блоке vk_coomments на Вашем сайте. Не расстраиваемся. В этом случае просто нужно Cамому указать для каждой Вашей страницы её id. И для Контакта, и для Facebook значение может быть и цифровым, и буквенным (несмотря на указанные в документации к виджетам пожелания цифровых значений - а конкретно целое 32 разрядное число)

В скопированном коде у Вас есть строчка. Для VK это:

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15});

Теперь она же но Доступным языком

VK.Widgets.Comments('vk_comments', {width: ШИРИНА БЛОКА, limit: МАКСИМУМ ПОКАЗАННЫХ КОММЕНТОВ НА СТР}, ЗДЕСЬ ИДЕНТИФИКАТОР ВАШЕЙ СТРАНИЦЫ);

ID (идентификатор) - может быть словом (латинницей), цифрой. Главное, что теперь алгоритму будет понятно, что эти комментарии нужно будет привязать к странице 5, а другие к странице 2. После комментарии данных страниц будут привязаны только по их ID, те комменты страницы 2 будут отображаться только на ней.



Желательно
...чтобы этот идентификатор был или Адресом Вашей страницы, например, yoursite.ru/article?id=1, или, повторюсь, можно цифрой. Вот оба варианта:

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, 25);

или

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, yoursite.ru/25);

Как прикрепить ID страницы для VK (ВКонтакте)

Если сайт на PHP, то

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, <?=md5($_SERVER['REQUEST_URI']);?>);

Ну и хорошо бы его зашифровать (md5). На всякий случай - сверху короткая запись echo (=). Короткая запись разрешена не на всех серверах, поэтому можно длиннее

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, <?php echo md5($_SERVER['REQUEST_URI']);?>);

Если сайт на html, то либо так

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, document.location.pathname);

...либо ставим любой идентификатор (число/слово латинницей). Всё равно сайт на html статичен =) .. и всё делать ручками...

VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, 999);

Дополнительно:

Как добавить виджет сообществ vk.com

Как добавить виджет авторизации vk.com