Виджет для комментариев разработчикам вконтакте. Налаживаем контакт с социальными сетями. Виджет комментариев вконтакте

27.04.2019
UPD 17.12.2013 — обновлен код для вставки виджета на сайт.

Привет всем! В прошлой статье я начал рассказывать о том, у себя на сайте. Рассказал о плюсах и минусах таких систем комментирования, а также показал, как установить Facebook комментарии.

Но в России есть свой социальный гигант, доля которого значительно превышает Фейсбук — это социальная сеть Вконтакте. Сегодня я расскажу как подключить комментарии Вконтакте на сайте.

Кстати, вместе с ростом популярности Вконтакте, растет и потребность в продвижении на просторах данной социальной сети. Предложений на рынке много, но не все они полно отвечают требованиям заказчика. Одним из наиболее эффективных онлайн сервисов раскрутки и продвижения является Soclike . Подписчики в группы и на личные профили, лайки, репосты и многое другое. Продвигай свои группы при поддержке команды профессионалов!

Итак, начнем без долгих прелюдий. Заходим на страницу разработчиков Вконтакте, где переходим по ссылке «Виджеты и сторонние сайты» . Здесь нас интересует виджет комментариев. Из списка виджетов выбираем «Комментарии». На странице находим окно с настройками виджета и вводим туда необходимые параметры:

Во вкладке «Сайт/приложение» выбираем «Подключить новый сайт» , если он еще не подключен и вы не пользовались другими возможностями Вконтакте для разработчиков (такими как авторизация, виджет сообществ, кнопка «Мне нравится» и т.д.)

Вводим название для сайта (вводите любое название, оно будет видно только вам) и его адрес.

В пункте «Медиа» поставьте галочку, если хотите, чтобы в комментарии можно было вставлять аудио, видео записи, граффити и т.д. Нажав ссылку «подробнее» можно выбрать определенные пункты.

Затем выбираем необходимую ширину виджета.

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

Первую часть необходимо вставить между тегами ‹head›‹/head› в шапке вашего сайта. Для WordPress это файл header.php в папке с темой оформления.

VK.init({apiId: 1234567, onlyWidgets: true});

Вторую часть вставляем в то место, где непосредственно должны выводиться комментарии (например, если у вас движок wordpress и вы хотите установить комментарии на станицах со статьями, то вам нужно вставить этот код в файл single.php )

VK.Widgets.Comments("vk_comments", {limit: 10, width: "540", attach: "*"});

Модерировать комментарии можно как через форму комментариев, так и через приложение на сайте Вконтакте. Там все очень легко и интуитивно понятно.

Теперь вы узнали, как подключить комментарии Вконтакте и Facebook комментарии. Выбирайте то, что вам больше подходит!

Не забывайте моего блога. Подписчики всегда первыми узнают о новых конкурсах и акциях 😉 Удачи!

Эх, давно что-то я не писал на тематики WordPress и Вконтакте. А тут решил написать инструкцию как установить виджет комментариев вконтакте для сайта на WordPress. Одним выстрелом убить двух зайцев, так сказать. Вообще у меня в блоге уже давненько стоит 2 формы комментариев: обычная WordPress и форма комментариев Вконтакте. Я вынес их в разные «табы» (при клике на разные кнопки выводится разная информация). Собственно хотелось бы сказать для начала пару слов о плюсах и минусах использования комментариев вконтакте на сайте .

Плюсы виджета комментариев Вконтакте

1) Если авторизованный в социальной сети Вконтакте пользователь прочтет ваш материал и ему вдруг захочется оставить комментарий, то в этом случае не придется вводить как в стандартной форме e-mail, имя и чаще всего еще каптчу, а только сам комментарий. Также исключает необходимость регистрации, если такова была ранее предусмотрена для комментирования через стандартную форму.

2) Исходя из первого, вторым плюсом можно засчитать это то, что будет видно комментатора «в лицо» — его фото и имя с фамилией. «Живому человеку» куда приятнее отвечать же, однако не все указывают настоящие данные и фото.

3) Для тех, у кого полно валится спама на сайт, это будет большим плюсом. Так как спам в этой форме комментариев минимален по количеству, в то время как форма комментариев вконтакте используется без каптчи.

4) Можно банить (добавляться в черный список) пользователей оставляющих спам и они никогда не смогут больше оставлять комментарии у вас. Премодерации кстати нет (только удаление уже оставленных комментариев), но лично я ее использовал только если комментарий имеет ссылку. Промодерировать комментарии хотя бы раз в неделю не составит труда и не займет много времени. Еще, кстати, можно добавлять модераторов.

5) Отличительный плюс – можно получить дополнительный трафик с соц. сети. В некоторых случаях он достаточно немалый.

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

1) Для тех, кто разрешает оставлять dofollow ссылки в стандартной форме комментариев будет минусом. Если у вас поступает много комментариев на блог, а вы вдруг отключите стандартную форму и поставите форму комментариев вконтакте число комментариев, скорее всего, сократится, так как большинство комментариев, вероятно, поступает именно из-за dofollow ссылок – что является одним из способов получить трафик на свой сайт. У кого ссылки nofollow или вообще убрана строка URL в форме — минуса в этом случае нет.

2) Ну и еще парочка маленьких минусов. Первый – нельзя настраивать дизайн, поэтому у некоторых он не очень впишется в дизайн. Второй – хоть и социальная сеть Вконтакте собрала всю Россию, однако есть люди не пользующиеся ей.

Как видите, количество плюсов значительно превосходит количество минусов. Если есть желание и одновременно есть сомнение в преимуществе – попробуйте оставить 2 формы комментариев (правда немного некрасиво и громоздко, но это решаемо). А теперь перейдем непосредственно к самому процессу и рассмотрим как вставить комментарии вконтакте на сайт Wordpress.

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

Не советую пользоваться каким-либо плагином для wordpress, чтобы использовать комментарии вконтакте. Чтобы установить вручную нужно всего несколько минут. А лишний плагин на сайте это масса неположительных факторов.

2) На этой странице вы можете прочитать информацию и создать форму для своего сайта. В форме указываем всю необходимую информацию в пустых полях: Название сайта, Адрес сайта, Основной домен сайта (обычно такой же, как и адрес сайта). Далее укажите, какое количество комментариев будет отображено на странице (остальное свернуто и доступно по клику «к предыдущим записям»). Можете запретить использование в комментариях фото, аудио, видео, ссылок, граффити – для этого уберите галочку рядом с «Медиа». Если хотите запретить не все, а что-то определенное, например ссылки, то нажмите «подробнее» и снимите необходимые галочки. Ширину можно подогнать под свой дизайн, но лучше не трогать, если нет понимания в этом.

4) Копируем первую часть кода (выделена большой фигурной скобкой на скриншоте) и вставляем в файл темы header.php до закрывающего тега (чтобы не «накосячить» вставляйте непосредственно перед этим тегом). Для этого зайдите в панели управления «Внешний вид -> Редактор -> Заголовок (header.php)», отредактируйте и сохраните (кнопка «Обновить файл»).

5) Скопируйте вторую часть кода и вставьте в файл «Одна запись» (single.php) после вывода материала – и непосредственно перед . Сохраните изменения (кнопка «Обновить файл»). Готово! По желанию можете отключить стандартную форму комментариев в настройках WordPress.

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

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

Чтобы удалить сообщение наведите на комментарий и нажмите на появившийся серый крестик в правом верхнем углу. Далее можно: «Восстановить комментарий», «Удалить все её сообщения за последнюю неделю и добавить её в черный список» и просто оставить этот комментарий удаленным.

Чтобы добавить администратора нажмите «Назначить администраторов» и на открывшейся странице введите прямую ссылку на страничку необходимого человека и нажмите кнопку «Добавить администратора».

Уф, какая большая статья получилась! Возникнут проблемы или вопросы пишите в комментариях.

Честно говоря, сейчас существует множество CMS. Все они наделены обилием разного рода модулей и дополнений. Но есть ряд сайтов, на которых отсутствует должный функционал. Поэтому сегодня мы поговорим о комментариях.

Комментарии на вашем сайте – это один из больших плюсов и вещей, которыми нужно обзавестись в первую очередь. Почему? Потому что комментарии – это общение, прежде всего, живых людей.

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

  • 100% живое общение . Для написания комментария пользователь должен иметь профиль в социальной сети.
  • Популярность . Почти каждый второй (если не первый) зарегистрирован в этой сети, а значит для того, чтобы оставить комментарий на вашем сайте, нужно просто быть авторизованным на сайте «ВКонтакте».
  • Быстрая установка виджета на сайт.
  • Вирусность . Если пользователь оставит комментарий на вашем сайте, то есть вероятность того, что этот же комментарий ретранслируется на его стене «ВКонтакте» с упоминанием вашего сайта, а это значит, что о вашем проекте узнают все друзья автора комментария.
  • Удобное и простое модерирование комментариев.
  • Возможность индивидуальных настроек . Администрация социальной сети рада выслушать ваши пожелания, касающиеся личных настроек виджета для вашего сайта. Для этого вам необходимо написать сообщение на почту пресс службы «ВКонтакте» – [email protected] .
  • Настройка и установка виджета комментариев на сайт

    1. Итак, первым делом переходим по и попадаем в раздел для разработчиков, где на открывшейся странице видим форму с настройками. С ними мы сейчас и будем работать.

    2. В форме вашей информацией заполняете следующие поля:

    - «Название сайта»;
    - «Адрес сайта».

    И выбираете тематику вашего сайта.

    Основной домен сайта пропишется автоматически. Жмете «Сохранить » – тем самым вы добавляете сайт в систему.

    3. Теперь вам необходимо произвести настройки виджета:


    Выбираем:

    Количество комментариев , которое будет отображаться по умолчанию (5, 10, 15 или 20 комментариев);

    Опцию «Медиа » – если вы хотите, чтобы пользователи могли оставлять не просто текстовые сообщения, но и прикреплять видео, фото, ссылки или другой контент (настраивается по нажатию ссылки «Подробнее »);

    Ширину . Если вы хотите сделать фиксированный размер – то укажите размер в пикселях, если же хотите сохранить «резиновый» размер (адаптирующийся под размеры блока, в котором находится виджет) – оставляете поле пустым.

    4. И финальным шагом будет подключение виджета к вашему сайту с помощью предложенного кода в поле «Код для вставки ».

    4.1. Для этого в секцию HEAD (в HTML-код сайта или его тему), перед закрывающим ее тегом подключите скрипты, выделенные красным:


    4.2. В нужное место на сайте, где вы хотите вывести комментарии (в HTML-код сайта или его тему) вставьте код, выделенный синим:


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

    Сохраните все изменения на сайте и подождите пару минут. Теперь, посмотрев страницы, на которые вы внедрили необходимый код, вы сможете обнаружить готовый виджет комментариев от «ВКонтакте», где сначала сами попробуете написать что-нибудь:)

    Если это не так и у вас возникли трудности с установкой или настройкой виджета – пишите об этом в комментариях.

    12 октября 2011 в 18:59 Виджет комментариев вконтакте для вашего сайта и хранение количества комментариев на сервере

    Двигаясь в ногу со временем, я решил разместить на своем сайте виджет комментариев «Вконтакте». Немного терпения, гугла и документации вполне достаточно для того чтобы достичь результата. Разместить сам виджет не составляет никакого труда, вконтакте предоставляет простой интерфейс генерирующий код для сайта. Мне хотелось в некоторых местах отображать количество комментариев. Тут и возникли сложности, как обычно это бывает, дьявол кроется в мелочах. Я попробую разложить по полочкам то, о чём умалчивает документация.

    1.Регистрация cайта вконтакте Чтобы разместить сам виджет, сначала сайт следует зарегистрировать как приложение Вконтакте . Заполняем форму, получаем СМС, еще раз заполняем форму, в результате регистрации приложения мы должны получить два ключа :

    api_id - идентификатор нашего сайт как приложения в вконтакте

    api_secret - секретный ключ, который знает только владелец приложения. По нему шифруются данные, которые иначе могут быть подменены/испорчены/искажены злоумышленником, для генерации электронной подписи к этим данным на стороне вконтакте, нам он нужен, для того чтобы проверять их на достоверность. И да, он нам тоже понадобится в дальнейшем.

    P.S: Вконтакте предоставляет упрощенный способ регистрации приложения для виджета «Комментарии», но в этом случае невозможно получить ключ api_secret(по крайней мере я битый час искал способ его получить и… не нашёл), который необходим в случае хранения количества комментариев. Поэтому не ленимся и создаём приложение.

    2.Создание виджета Создаём сам виджет, не имею желания дублировать документацию к виджету, скажу что в итоге должно получиться что-то вроде этого:
    VK.init({apiId: %ВАШ_api_id%, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, width: "1000", attach: "*", onChange: addCommentCallback}, "post_");

    Что такое onChange, читайте дальше; Третий параметр - это ID данного виджета(блока) комментариев, если его не указывать в качестве id используется md5-хэш от location.href(ссылки на эту страницу). Мне это не подошло, так как на один элемент у меня указывало несколько разных ссылок. На этой стадии виджет уже работает, теперь нужно сообразить отображение количества комментариев.

    3.Передача данных о количестве комментариев на сервер Очевидно, что самым удачным вариантом является хранение количества комментариев в базе данных, даже если мы не храним сами комментарии, так как получение количества комментариев через API вконтакте будет слишком сильно тормозить работу сайта. Я храню количество комментариев в отдельном столбце таблицы с данными. Вопрос только в том, как держать в базе значение в обновленном состоянии и избежать рассинхронизации.
    API виджета комментария имеет параметр onChange . Функция, которую содержит параметр onChange , вызывается каждый раз при событии удаления/создания комментария. Колбек-функция onChange вызывается с четырьмя параметрами

    num - количество комментариев
    last_comment - последний комментарий
    date - дата
    sign - ключ

    Это нам и нужно. Теперь пишем саму функцию addCommentCallback, она будет делать ajax запрос, передавая все 4 параметра выше, а также id записи на сервер. Вот что получилось у меня(используется jquery):

    Function addCommentCallback(num, last_comment, date, sign){ $.post("%ССЫЛКА_НА_СТРАНИЦУ_ОБРАБОТКИ_КОММЕНТАРИЯ%",{ type: "vkontakte", num: num, last_comment: last_comment, date: date, sign: sign, id: "" }); }

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

    4.Валидация данных Теперь-то нам и понадобится ключ api_secret, полученный нами при регистрации приложения. Повторюсь, лично я не нашел способа получить этот код, если регистрировать сайт через упрощенку.

    Php-код, обрабатывающий запрос, и пишущий в базу количество комментариев:
    $post = $_POST; if (!isset($post["num"])){ $error = "не указано количество"; } else{ $apiSecret = %ВАШ_API_SECRET%;//(да, за этим мы и прошли полную регистрацию) $hash = md5($apiSecret.$post["date"].$post["num"].$post["last_comment"]);// до того, как обновить количество комментариев, мы получаем md5 - хэш от параметров api_secret, date, num, last_comment: if (strcmp($hash, $post["sign"]) == 0){//проверяем что хэши совпадают //тут код сохранения в базу } else{ $error = "не совпадает хэш"; } }
    Вот и всё! При желании, можно в базу сохранять не только количество комментариев, но и сами комментарии. Надеюсь что статья оказалась полезной и я не потратил зря время.

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

    Процесс установки виджета комментариев - поэтапно

    Как же все-таки установить этот виджет на свой сайт? Сейчас постараюсь наглядно это объяснить. В первую очередь вам нужно добавить свой сайт в приложения в ВКонтакте. Для этого зайдите в аккаунт, с которого хотите управлять комментариями (администрировать), а можете зарегистрировать новый.

    Теперь приступаем к добавлению сайта в приложения ВКонтакте и настройке виджета. Заполняем все поля. В «Название сайта» вписываете любое название, которое вам понравится. Для удобства лучше вписать название блога, на который добавляете виджет. Дальше «Адрес сайта». Здесь нужно указать адрес на главную страницу сайта, например, google.com, но не google.com/...html. В поле «Основной домен сайта» автоматически будет добавлен адрес сайта без «http://», так что там ничего заполнять не нужно. В разделе «Тематика сайта» вам необходима указать тематику вашего сайта, например, ИТ (компьютеры и софт).

    Теперь осталось настроить виджет. Для этого выбираем, сколько комментариев виджет будет выводить на одну страницу. Это не принципиально и на ваше усмотрение.

    Дальше «Медиа». Этот раздел дает возможность указать, что можно будет прикреплять к комментариям. Если вы не хотите, чтобы пользователи что-то прикрепляли к комментариям, просто уберите галочку. Также можно вручную отфильтровать что можно будет прикреплять, нажав «подробнее». Убрать ненужные пункты можно путем снятия с них галочки.

    Ниже идет «Ширина виджета», которую также можно отрегулировать. Ширина указана в пикселях. Если вы укажите не ту ширину, которая вам подходит, вы сможете в любой момент ее изменить.

    После настройки виджета, его нужно добавить на сайт. Здесь тоже ничего сложного нет. В окне «Код для вставки» можно увидеть код, разделенный на три абзаца. Первые два нужно вставить в коде главной страницы вашего сайта в теге «head». Третий абзац необходимо вставить в «тело» страницы - в теге «body», а именно там, где должен будет отображаться виджет.

    Теперь на вашем сайте/блоге можно оставлять комментарии через ВКонтакте. Осталось разобраться, как управлять комментариями. Для этого зайдите через свой аккаунт ВКонтакте (через тот, с которого добавляли виджет) на страницу сайта с виджетом комментариев. На самом виджете будет кнопка «администрировать». Нажав на нее, вы попадете в небольшую админ-панель, через которую сможете удалять ненужные комментарии, заносить пользователей в черный список или назначать кроме себя еще администраторов.

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

    Похожие статьи