аватар Автор: Сергей Касаткин | 31 января 2013 14:07

Статьи / JavaScript /

Как добавить комментарии от 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 будут отображаться только на ней.

Советую сразу определить с точной формулировкой id (будь то число или url) для уже существующих и будущих страниц. При смене идентификатора будут отображаться комментарии, добавленные только по Последнему id!


Желательно
...чтобы этот идентификатор был или Адресом Вашей страницы, например, 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);


В случае с комментами Facebook просто числовой id использовать не получится. У них подобные искусственные идентификаторы глобальны. Т.е., проставив значение 1, у Вас высокая вероятность на своём же сайте увидеть комментарии всех других сайтов, проставивших данный идентификатор. Да-да, они пока не защищены и можно побаловаться, поиграв с идентификатором) Но об этом в другой статье))


Как прикрепить 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
 



Похожие статьи


Комментарии к статье (vk.com)