Добавляем виджет комментариев ВКонтакте

комментарии вконтакте

Добрый день, дорогие посетители!

Сегодня я предлагаю вам познакомиться с подробной инструкцией о том, как сделать и настроить виджет комментариев ВКонтакте.

Эта статья будет полезная тем, кто хочет продвинуть свой сайт как в поисковой выдаче, так и в социальных сетях. Ведь давно уже не секрет, что на сегодняшний день соц.сети занимают неотъемлемую часть жизни большинства пользователей. Ежедневно социальной сетью ВКонтакте пользуются миллионы пользователей, и было бы непростительной ошибкой не воспользоваться возможностью привлечь этих пользователей к себе на сайт.

Разработчики ВКонтакте предусмотрели удобный механизм интеграции социальной сети на сайты. В разделе VK Developers огромное количество приложений, которые вы можете подключить к себе на сайт в зависимости от ваших потребностей.

Генерируем виджет ВКонтакте

На самом деле все достаточно просто. Настроить виджет комментариев ВКонтакте у вас займет всего несколько минут.

  1. 1.Авторизуемся под своим аккаунтом в VK и переходим по этой ссылке (https://vk.com/dev). На главной странице VK Developers нам нужно кликнуть по пункту главного меню «Мои приложения». Нам, в первую очередь нужно получить API IP для нашего виджета. Без него виджет ВКонтакте работать не будет. Для этого создадим приложение под названием «Виджет комментариев».
  2. главная страница VK Developers
  3. 2.На странице создания приложения заполняем следующие поля и нажимаем на кнопку «Подключить сайт».
  4. создаем приложение VK
  5. 3.Нам нужно будет подтвердить свои действия, получив проверочный код.
    получаем код проверки

    После чего, ввести его в соответствующее поле.

    вводим код
  6. 4.После подтверждения, наше приложение будет создано, и нас перенаправят на страницу настройки информации о приложении, где при необходимости вы можете задать дополнительные данные. Не забудьте нажать на кнопку «Сохранить изменения».
    дополнительные настройки приложения вконтакте
    Обратите внимание на табличку с предупреждением. Нас предупреждают о том, что скоро для работы нашего сайта c API ВКонтакте нам нужно будет подключить протокол HTTPS для нашего сайта.
  7. 5.Далее, переходим в пункт меню «Настройки». Где находятся нужные нам ID приложения и защищенный ключ. Копируем их в текстовый документ у себя на компьютере. Больше ничего здесь менять не нужно.
  8. получаем ID API
  9. 6.Далее, переходим в пункт основного меню «Продукты».
  10. переходим в продукты
  11. 7.На открывшейся странице переходим в пункт меню «Виджеты для сайта» или кликаем по соответствующему разделу на самой странице.
  12. выбираем виджет для сайта
  13. 8.В данном разделе содержится большое количество виджетов ВКонтакте, предназначенных ля выполнения определенных функций. Нам в данный момент нужен виджет «Комментарии». Выбираем этот раздел.
  14. виджет комментариев
  15. 9.На странице настройки виджета комментариев мы, в первую очередь, можем ознакомиться с возможностями и преимуществами использования данного виджета ВКонтакте, кликнув по спойлеру.
  16. информация о виджете
  17. 10.Приступаем к настройке виджета комментариев ВКонтакте.
    настройки виджета

    Вам нужно задать:

    1. 1.Количество комментариев, которое будет отображаться в виджете ВКонтакте.
    2. 2.Включить или отключить поддержку медиа. Эта опция отвечает за возможность пользователей вставлять в комментарии медиа файлы. Если кликнуть по ссылке подробнее, то откроется список медиа элементов, которые можно включить или отключить по отдельности.
    3. поддержка медиафайлов
    4. 3.Указываем ширину виджета комментариев ВКонтакте в зависимости от ширины места на странице, где мы хотим его разместить.
    5. 4.В окошке «Код для вставки» находятся два фрагмента кода, сгенерированные для нас.
      код виджета
      Обратите внимание на выделение, которое я указала на картинке. Здесь должен стоять, полученный ранее, ваш API ID. Проверьте!
    6. 5.Если у вас есть какие-то специфические требования, вы можете перейти по ссылочке «Перейти к подробной документации виджета». Здесь вы сможете найти дополнительные инструкции по вставке и настройке виджета ВКонтакте.
    7. дополнительная информация по подключению

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

Приступаем к вставке кода нашего виджета ВКонтакте на страницы сайта. Я покажу вставку на примере моего сайта, сделанного на WordPress.

  1. 1.При помощи текстового редактора Notepad++, подключаемся к нашему сайту и открываем файл header.php. Так же, это можно сделать через админку WordPress, зайдя в раздел главного меню «Внешний вид» => «Редактор».
  2. 2.В коде файла находим закрывающийся тег </header> и перед ним вставляем первый фрагмент полученного кода.
  3. скрипт виджета
  4. 3.Сохраняем файл.
  5. 4.Далее, открываем файл single.php и вот здесь вам придётся поэкспериментировать где вставить второй фрагмент кода. Пролистываем в самый конец файла и, методом проб, вставляем код перед закрывающимися тегами </div>, и подбираем наиболее удобное расположение виджета.
  6. код виджета

У меня получилось вот так:

готовый виджет

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

Так же, если вы не угадали с шириной виджета, не нужно генерировать код заново. Можно задать параметры виджета в самом коде:

параметры виджета в коде

Кроме виджета комментариев ВКонтакте, можно подключить и другие виды виджетов, как для того же VK, так и для других социальных сетей. Если вам интересна данная тема, дайте мне знать в комментариях, и я обязательно сделаю для вас другие стати с инструкциями.

Сделать и подключить виджет соцсети занимает не так уж и много времени. Зато в результате вы получаете значительный плюс к продвижению вашего сайта.

А на сегодня у меня все. Оставляйте комментарии, подписывайтесь на мою рассылку и мой канал на YouTube. До встречи в следующих статьях.

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

6 комментариев

  1. Здравствуйте! Немного не по теме. Юлия, а можно подобно этой форме выводить сообщения в определенной записи из определенной ветки форума и также добавлять через эту форму в запись, чтобы выводились на форуме? Есть какой-то такой плагин интеграции вордпресса и форума phpbb, чтобы без регистрации пользователей на сайте?

    • Юлия, я не совсем поняла вопроса. Какой форум Вы имеете ввиду и как он связан с форумом комментариев Вконтакте?

  2. Скажите,а если нет записи комментарии ,а только все связанное с post , можно как-то вставить или нет ?

    • Вы не могли бы уточнить вопрос? Я не совсем понимаю что Вы имеете ввиду?

  3. Прошу прощения, может быть мой комментарий не в тему, но я всё же поинтересуюсь. Ни кто не в курсе, может быть есть какой-нибудь способ находить сайты с комментариями VK в поисковой выдаче? Мне очень надо.

    • Не сталкивалась с подобной задачей! А Вам зачем, если не секрет?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif