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

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

Приключение на 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
Решаем задачу коммивояжёра простым перебором
Решаем задачу коммивояжёра простым перебором

Простое решение, но много кода.

easy
Что означает ошибка SyntaxError: missing formal parameter
Что означает ошибка SyntaxError: missing formal parameter

Ты объявляешь функцию, но ты делаешь это без уважения.

easy
Ваш собственный орфокорректор с автозаменой

Проект недели.

hard
Объективный таймер обратного отсчёта на PHP

Если нужно взять дату напрямую с сервера

medium
Прогаем в Экселе: автомобиль в кредит или по подписке?
Прогаем в Экселе: автомобиль в кредит или по подписке?

Программерский подход, подручные средства.

easy
Успокаивающие звуки на любой странице
Успокаивающие звуки на любой странице

Тревожное время требует кода на JavaScript.

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

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

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

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

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

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

easy
Проект: генератор тупых новогодних поздравлений

Новый год спасён!

easy
easy