Как подключить комментарии к сайту

🤔 Что дела­ем: под­клю­ча­ем к сай­ту модуль с ком­мен­та­ри­я­ми ВКон­так­те, что­бы посе­ти­те­ли мог­ли делить­ся сво­им дра­го­цен­ным мнением.

🕔 Вре­мя: 4 минуты.

Пона­до­бит­ся: акка­унт в ВК.

👉 Корот­ко суть: у ВК есть сер­вис ком­мен­та­ри­ев, кото­рый мож­но под­клю­чить к любо­му сай­ту. Для это­го нуж­но ука­зать адрес сай­та, полу­чить спе­ци­аль­ный код и вста­вить его в нуж­ное место. 

Получаем код для вставки

Вхо­дим в свой акка­унт ВКон­так­те и пере­хо­дим на стра­ни­цу vk.com/dev/Comments — офи­ци­аль­ную стра­ни­цу пла­ги­на ком­мен­та­ри­ев. Там нам нуж­но выбрать «Под­клю­чить новый сайт» и запол­нить его назва­ние и адрес. Когда закон­чи­те — нажми­те «Сохра­нить».

После это­го у нас обно­вит­ся код для встав­ки — в нём появит­ся наш ID, что­бы сер­вис знал, какой модуль ком­мен­та­ри­ев на каком сай­те кому при­над­ле­жит. Первую часть кода нуж­но вста­вить в раз­дел <head>, а вто­рую — в то место, где мы хотим раз­ме­стить сам блок комментариев.

Как подключить комментарии к сайту

Вставляем код на сайт

Наша зада­ча — вста­вить этот код на стра­ни­це сай­та, где мы хотим под­клю­чить ком­мен­та­рии. Для это­го нам нужен доступ к хостин­гу сайта.

Так как мы хотим ком­мен­та­рии на глав­ной стра­ни­це, то в пане­ли хостин­га выби­ра­ем файл index.html и нажи­ма­ем на него два раза, что­бы отредактировать:

Как подключить комментарии к сайту

Теперь добав­ля­ем первую часть наше­го код из ВК в раз­дел <head>:

<!-- Put this script tag to the <head> of your page -->

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

<script type="text/javascript">

  VK.init({apiId: 9877995, onlyWidgets: true});

</script>

Как подключить комментарии к сайту

А вто­рую часть кода встав­ля­ем в самый конец стра­ни­цы (если они нам нуж­ны в кон­це страницы):

<!-- 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: 10, attach: "*"});

</script>

Как подключить комментарии к сайту

Проверяем результат

Блок с ком­мен­та­ри­я­ми под­клю­чит­ся сра­зу, поэто­му про­сто пере­хо­дим на нашу учеб­ную стра­ни­цу mihailmaximov.ru и смот­рим результат:

Как подключить комментарии к сайту

👉 Если вы про­пу­сти­ли про­ект, в кото­ром мы соби­ра­ли эту стра­ни­цу, — почи­тай­те ста­тью Дела­ем стра­ни­цу «О себе» на Бут­стра­пе.

Что дальше

Даль­ше, если нуж­но, мож­но почи­тать тех­ни­че­скую доку­мен­та­цию ком­мен­та­ри­ев и настро­ить всё как нуж­но вам:

  • уста­но­вить допол­ни­тель­ные настройки;
  • доба­вить отсле­жи­ва­е­мые события;
  • посмот­реть, как мож­но адми­ни­стри­ро­вать комментарии;
  • уста­но­вить, что мож­но при­креп­лять к ком­мен­та­ри­ям, а что нельзя.

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев