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

Приключение на 4 минуты.

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

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

🕔 Время: 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 и смотрим результат:

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

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

Что дальше

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

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

Редактура:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Через год — лучше работа, выше зарплата
В «Яндекс Практикуме» становятся разработчиками с нуля. Выберите язык — веб, Python, Java, C++ — и учитесь. Джуны зарабатывают от 80 000 ₽, мидлы — от 150 000 ₽. Дальше — программы трудоустройства и компенсация, если пойдёте в Яндекс.
Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата Через год — лучше работа, выше зарплата
Вам может быть интересно
Делаем своего первого чат-бота
Делаем своего первого чат-бота

Суперпростой способ создать бота, не зная программирования.

easy
Как поклеить обои
Как поклеить обои

Поручим это машине.

easy
Пинг-понг против компьютера на JavaScript
Пинг-понг против компьютера на JavaScript

Лёгкая версия

easy
Cортировка подсчётом: как работает сортировка без сравнений
Cортировка подсчётом: как работает сортировка без сравнений

Надо просто посчитать, сколько раз встречается каждый элемент

medium
Пишем программу, которая одобрит вам кредит
Пишем программу, которая одобрит вам кредит

Или не одобрит, хехех.

easy
Решаем кодом: найти самую длинную вложенную строку
Решаем кодом: найти самую длинную вложенную строку

Без повторных символов

medium
Как клонировать репозиторий на GitHub
Как клонировать репозиторий на GitHub

Через командную строку или IDE

hard
Находим самые популярные слова в опросах
Находим самые популярные слова в опросах

Магия таблиц на службе общественного мнения

medium
Что означает ошибка SyntaxError: missing : after property id
Что означает ошибка SyntaxError: missing : after property id

Используйте двоеточие, если хотите обратиться к свойству объекта.

easy
easy