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

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

Приключение на 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 и смотрим результат:

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

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

Что дальше

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

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

Текст:

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

Редактура:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как поклеить обои

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

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

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

easy
Чат-бот
Делаем своего первого чат-бота

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

easy
Улучшаем арканоид
Улучшаем арканоид

Добавляем очки, жизни и нарастание сложности.

medium
Блокировщик соцсетей, который спасёт вашу продуктивность

И поднимет осознанность.

easy
Делаем свой текстовый редактор с автосохранением

Это не так сложно, как звучит.

medium
Тетрис на JavaScript
Тетрис на JavaScript

Стильный и цветной.

medium
Бесконечная заставка с пинг-понгом
Бесконечная заставка с пинг-понгом

Ещё один способ работать с элементами, не зная их id

medium
10 типичных ошибок в коде на JavaScript
10 типичных ошибок в коде на JavaScript

Для знатоков и начинающих

easy
Делаем собственный таймер для спорта
Делаем собственный таймер для спорта

Без рекламы и встроенных покупок.

hard
Делаем сами: адаптивный сайт

С котиками!

medium
Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer
Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer

Неочевидная ошибка при организации цикла в Python.

easy
Программируем скринсейвер для Илона
Программируем скринсейвер для Илона

Анимация движения звёзд на JavaScript.

medium
easy