Шаблоны
Сайты клиентов
Тарифы
Обучение
Campus - Обучение
Практические знания, как улучшить навыки в создании сайтов
и заработке на этом
Статьи
Статьи, как улучшить качество сайта
и увеличить продажи
Справочный центр
Инструкции по сервису и связь
с тех.поддержкой
Бесплатный практикум
Инструкции по сервису и связь
с тех.поддержкой
Вход
Регистрация
← Назад
Интеграции
Связь с клиентами

Как добавить на сайт виджет комментариев
от Вконтакте

Сложность ∙ Легко

Видео-инструкция:

I. Зарегистрируйте сайт как приложение

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



• Перейдите по ссылке и авторизуйтесь в сервисе. Перед вами откроется такой экран:

Переход к регистрации приложения в VK
Переход к регистрации приложения в VK

• Впишите любое название приложения (1), выберите платформу "Web" (2), установите иконку приложения (3) и нажмите на кнопку "Далее":

Регистрация приложения в VK
Регистрация приложения в VK

• В поле "Базовый домен" укажите доменное имя, на сайте с которым вы хотите использовать виджет. В поле "Доверенный Redirect URL" укажите полную ссылку на ваш сайт. Нажмите "Создать приложение".

Ввод домена сайта для регистрации VK
Ввод домена сайта для регистрации VK

• Перед вами откроется такой экран. Скопируйте из поля "ID приложения" номер, он понадобится позже.

Отображение ID для размещения виджета комментариев VK
Отображение ID для размещения виджета комментариев VK

II. Настройте виджет

• Перейдите по ссылке, прокрутите ее до раздела "Код виджета":

Настройки виджета комментариев VK
Настройки виджета комментариев VK
  • Выберите кол-во комментариев для отображения внутри виджета.

    • Включите расширенные комментарии.

    При нажатии кнопки "Подробнее" дает возможность разрешить/запретить использование доп. инструментов, таких как: граффити, фото, видео, аудио, ссылки.
Опции виджета комментариев VK
Опции виджета комментариев VK
• Задайте ширину виджета. При указании 100% виджет занимает всю доступную ширину в блоке.

III. Размещение виджета на сайте

В итоге будет сформирован определенный код виджета. Он состоит из двух частей, которые нужно поместить в разные места сайта.

Отображение кода виджета для вставки в mottor
Отображение кода виджета для вставки в mottor

• Скопируйте часть кода, которая начинается с "Put this script tag to the <head> of your page" и разместите ее в настройках сайта, поле "Вставка в тег <head>":

Вставка кода виджета комментариев в mottor
Вставка кода виджета комментариев в mottor

Замените в коде числовое значение, которое стоит после "apiId:", вставьте туда скопированное ранее "ID приложения".

Замена ID виджета комментариев VK
Замена ID виджета комментариев VK

• Зайдите в редактор, создайте HTML-блок в том месте, где надо поместить виджет комментариев:

Добавление HTML-блока в редактор сайта
Добавление HTML-блока в редактор сайта

• Дважды кликните по нему, удалите все содержимое, вставьте вторую часть кода. Здесь нужно разместить то, что идет после слов "Put this div tag to the place, where the Comments block will be":

Вставка кода виджета в HTML-блок
Вставка кода виджета в HTML-блок

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



ВАЖНО:
Если код вы устанавливаете на разных страницах одного сайта, на каждой странице вашего сайта комментарии будут собираться отдельные, что позволяет создавать отдельные страницы статей с комментариями.



Дальнейшее управление виджетом
Теперь на странице вы можете не только создавать новые виджеты для других сайтов и страниц, но и полностью изменять параметры существующих виджетов.

После изменения параметров в уже созданном виджете — рекомендуем полностью заменить код на сайте, т.к. изменения могли произойти частично и в самом коде виджета.

Часто задаваемые вопросы
1. Как разместить на одной странице несколько виджетов?

Для этого требуется заменить в коде переменную "ID", чтобы они были уникальными для каждого виджета:
Размещение уникальных ID для виджетов
Размещение уникальных ID для виджетов
2. Можно ли использовать один и тот же виджет на разных сайтах?

Нет, виджет будет отображаться только на там сайте, адрес которого указывался при создании приложения в пункте I.
3. Почему виджет не отображается в предпросмотре?

Он не работает в предпросмотре и будет отображаться только на опубликованном сайте.

Итоги

Итак, в этой статье мы узнали, как можно разместить на сайте виджет комментариев от Вконтакте.

Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Создать сайт с ИИ бесплатно

Не забудьте протестировать все возможности mottor прямо сейчас

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Конструктор сайтов, чат-ботов, автоворонок, мобильных приложений

Быстрый старт:

Премиум поддержка
Полезные материалы
Интеграции
Технологии
Шаблоны сайтов
Тарифы
Импорт из Figma
Сделано на mottor
Партнеры

Продукты:

Сайты + лендинги
Интернет-магазины
Квизы
Чат-боты
Автоворонки
Приложение
AI-агенты (n8n)
Партнерская программа
WhiteLabel

О нас:

О компании
Тур по сервису
Вакансии
Отзывы
Контакты

Шаблоны:

Популярные запросы:

Все шаблоны
Шаблон доставка еды
Шаблон строительство
Шаблон недвижимость
Шаблон онлайн-курс
Шаблон онлайн школа
Шаблон портфолио
Шаблон вебинар
Шаблон интернет-магазин мебели

ООО “ЛПМОТОР”, все данные защищены

Договор оферта
Согласие
Политика конфиденциальнсоти
Инструкция по установке
Бесплатный конструктор сайта
Одностраничный сайт
Конструктор интернет магазинов
Конструктор страниц
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Сайт конструктор бесплатно
Создать квиз
Конструктор создания сайтов
Создать сайт бесплатно конструктор
Многостраничный сайт
Создать бесплатно интернет магазин
Создать сайт онлайн бесплатно самому
Создать сайт конструктор

Стоимость:

Клиенты:

Материалы:

Обновления
Справочный центр
Бесплатный практикум
Mottor Campus

Подпишитесь на наши соцсети
и получайте кейсы, исследования и обновления первыми:

Бесплатный звонок по России

Бесплатный звонок по России

support@lpmotor.ru

support@lpmotor.ru