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

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

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

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

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

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

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

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

2. 2.На странице создания приложения заполняем следующие поля и нажимаем на кнопку «Подключить сайт».

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

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

   
4. 4.После подтверждения, наше приложение будет создано, и нас перенаправят на страницу настройки информации о приложении, где при необходимости вы можете задать дополнительные данные. Не забудьте нажать на кнопку «Сохранить изменения».
   
   Обратите внимание на табличку с предупреждением. Нас предупреждают о том, что скоро для работы нашего сайта c API ВКонтакте нам нужно будет подключить протокол HTTPS для нашего сайта.
5. 5.Далее, переходим в пункт меню «Настройки». Где находятся нужные нам ID приложения и защищенный ключ. Копируем их в текстовый документ у себя на компьютере. Больше ничего здесь менять не нужно.

6. 6.Далее, переходим в пункт основного меню «Продукты».

7. 7.На открывшейся странице переходим в пункт меню «Виджеты для сайта» или кликаем по соответствующему разделу на самой странице.

8. 8.В данном разделе содержится большое количество виджетов ВКонтакте, предназначенных ля выполнения определенных функций. Нам в данный момент нужен виджет «Комментарии». Выбираем этот раздел.

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

10. 10.Приступаем к настройке виджета комментариев ВКонтакте.
    

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

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

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

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

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

3. 3.Сохраняем файл.
4. 4.Далее, открываем файл single.php и вот здесь вам придётся поэкспериментировать где вставить второй фрагмент кода. Пролистываем в самый конец файла и, методом проб, вставляем код перед закрывающимися тегами </div>, и подбираем наиболее удобное расположение виджета.

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

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

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

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

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

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

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