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

Приключение на 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
Что означает ошибка SyntaxError: Unexpected EOF
Что означает ошибка SyntaxError: Unexpected EOF

Скрипт неожиданно закончился, когда браузер этого не ожидал

easy
Вжух, вжух! Добавляем звук меча на любой странице
Вжух, вжух! Добавляем звук меча на любой странице

Время дурацких проектов.

medium
Как сделать игру на Python бесплатно
Как сделать игру на Python бесплатно

Без донатов!

medium
Как выучить JavaScript с нуля: готовый план для начинающих
Как выучить JavaScript с нуля: готовый план для начинающих

Сроки, бесплатные ресурсы и ошибки, которые тормозят 90% новичков

medium
Все мои волки делают AI: как научить коллег вайбкодить за вас
Все мои волки делают AI: как научить коллег вайбкодить за вас

Прочитайте сами или отправьте коллегам, которые никогда не вайбкодили

easy
Как убрать подчёркивание ссылок в CSS
Как убрать подчёркивание ссылок в CSS

Делаем ссылки красивыми и современными

easy
easy