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

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

Приключение на 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
Большой разбор: ИИ научился играть в динозаврика из Chrome

Тот редкий случай, когда хочешь остаться без интернета.

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

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

easy
Как быстро найти любой логарифм с помощью обычного цикла
Как быстро найти любой логарифм с помощью обычного цикла

Пишем простой код на Python

easy
Как устроен проект «Гадаем на статьях Кода»
Как устроен проект «Гадаем на статьях Кода»

Никакой магии, только JavaScript.

easy
CSS: как задавать размеры элементов на сайте
CSS: как задавать размеры элементов на сайте

Шпаргалка по единицам измерения для начинающих верстальщиков

easy
Uncaught SyntaxError: Unexpected identifier — что это означает?
Uncaught SyntaxError: Unexpected identifier — что это означает?

Вредная ошибка, которую легко исправить.

medium
Перекрашиваем картинки с помощью CSS
Перекрашиваем картинки с помощью CSS

Фотошопим кодом в браузере

easy
Телеграм-бот на Python

15 минут — и можете запускать своего первого бота.

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

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

medium
Защита важных файлов: автоматический бэкап за пять минут
Защита важных файлов: автоматический бэкап за пять минут

Первый шаг в информационной суверенности

medium
easy