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

Интеграция сервисов социальных сетей может помочь продвижению вашего сайта. В этом посте я подробно расскажу как сделать комментарии вконтакте на сайт. Такая форма комментариев ВК будет отображаться на страницах и постах вашего сайта.

1. Зачем нужны комментарии вконтакте на сайт

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

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

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

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

В самом низу любой страницы сайта вконтакте есть небольшое меню. В нем переходим в раздел “Разработчикам”

Далее в открывшемся окне выбираем раздел “Подключение сайтов и виджеты”

В открывшемся окне-списке кликаем по пункту “Комментарии” (Виджеты для сайтов). В открывшемся окне вы можете ознакомится с подробным описанием виджета комментариев и заполнить форму для последующей интеграции виджета в ваш сайт. Вам необходимо указать: адрес сайта (доменное имя), название сайта (например “мой блог”), основной домен (заполнится автоматически после заполнения поля адрес сайта), тематика сайта (выбрать из раскрывающегося списка наиболее подходящую), количество отображаемых комментариев, ширину (по умолчанию 665). После заполнения всех полей формы будет сгенерирован кусок кода в поле “Код для вставки”.

Теперь открываем любую страницу или запись в которой вы хотите разместить комментарии вконтакте на сайт и в режиме текстового редактора, переключившись в режим “текст” вставляем генерированный код
виджета вконтакте. Жмем кнопку “Обновить”.

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

Комментарии вконтакте на сайт вставлены!

Вы так же можете администрировать комментарии размещенные через эту форму. Для этого необходимо кликнуть по ссылке “Администрирование” непосредственно на самой форме в теле поста.

Источник: site2max.ru

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

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

Это не очень удобно. Именно поэтому я очень редко отвечал посетителям на комментарии в этом виджете, так как просто не знал об их появлении.

Но теперь всё изменится! Давайте сделаем уведомления на электронную почту о новых комментариях в виджете.

На самом деле всё просто. При отправке комментария виджет передаёт событие widgets.comments.new_comment. Подпишемся на это событие и выполним свой код, а именно отправку сообщения на электронную почту.

Стандартный код для вставки виджета на страницу выглядит так:

VK.Widgets.Comments(‘vk_comments’);

Изменим его, добавив подписку на событие, используя VK.Observer:

VK.Widgets.Comments(«vk_comments»); VK.Observer.subscribe(«widgets.comments.new_comment», function f(num, last, date, hash) < var xmlHttp = new XMLHttpRequest(); var params = ‘num=’ + encodeURIComponent(num) + ‘date=’ + encodeURIComponent(date) + ‘url=’ + encodeURIComponent(window.location) + ‘ xmlHttp.open( «GET», «http://example.com/commentnotify/notifyme.php?»+params, false ); xmlHttp.send( null ); >);

В восьмой строке замените имя домена на своё.

Итак, мы получили все необходимые данные и отправили их скрипту /commentnotify/notifyme.php . Напишем теперь его.

В функции smtpmail необходимо прописать адрес, на который слать уведомления, заголовок письма и его текст.
Осталось указать настройки для SMTP сервера с которого мы будем отправлять сообщения. Это сделаем в файле config.php, звёздочки замените на свои данные:

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

Ну и на всякий случай отключим индексирование нашего файла в robots.txt:

Disallow: /commentnotify/*

Источник: 19dx.ru

Установка виджета комментариев Вконтакте, Facebook и Google на сайт

В связи с указом президента Порошенко о блокирование на Украине социальных сетей Вконтакте и Одноклассники и поисковика Yandex, у меня возникла необходимость установить дополнительные виджеты комментариев от Facebook и Google и лучшую статью, которую я нашел в интернете размещаю у себя на блоге. Вот оригинальный источник.

В этой записи будет рассказано как установить на сайте виджеты комментариев от социальных сетей Вконтакте, Facebook и Google+.

Также будут показаны два варианта того, как компактно разместить эти виджеты в блоке со вкладками: то есть встроенные комментарии wordpress и виджеты комментариев Вконтакте, Facebook и Google+ будут находится каждый на своей вкладке.

1. Виджет комментариев Вконтакте
2. Виджет коментариев Facebook
3. Виджет комментариев Google+
4. Размещение виджетов во вкладках используя jquery
5. Размещение виджетов во вкладках без jquery
6. Используемые источники и полезные ссылки:

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

• Переходим на страничку vk.com/dev/Comments
• В выпадающем списке «Сайт/приложение» выбираем пункт «Подключить новый сайт»
• Заполняем поля:

• Название сайта: пишем любое название
• Адрес сайта: пишем url, я вписал «https://elims.org.ua»
• Базовый домен: домен, я вписал «elims.org.ua»
• Тематика: можно не выбирать

• Копируем код для вставки в файл comments.php в Вашем шаблоне в то место, где выводятся комментарии. Сам код состоит из двух частей:

• Часть с « of your page —>» — объявление внешнего js-скрипта:

• Вконтакте рекомендует установить между тегами , то есть в файл header.php
• Вы можете не парится и вставить весь код в одно место: в comments.php
• Либо прислушаться к рекомендациям оптимизаторов и обьявить внешний скрипт в самом низу страницы, то есть в файле footer.php

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

• Проходим по ссылке developers.facebook.com/apps
• Создаем новое приложение: жмем зеленую кнопку «+ Add a New App» в правом верхнем углу
• Среди предложенных платформ выбираем «Веб-сайт»
• В поле ввода под надписью «Quick Start for Website» пишем что-то вроде: «комментарии для моего сайта»
• Во всплывшем окне выбираем подходящую категорию для своего сайте и жмем кнопку Create App ID
• В нижнем поле «Site URL» можем указать url сайта.
• Далее переходим по ссылке developers.facebook.com/docs/plugins/comments
• В поле URL to comment on указываем url-сайта и жмем кнопку «Get Code»
• В результате должны увидеть что-то вроде этого:

• Как и с Вконтакте код состоит из двух частей: объявление внешнего js скрипта и сама форма комментирования.

• Первая часть — объявление внешнего скрипта: можете вставить в header.php, в comments.php или в самый низ страницы — в footer.php
• Вторую часть — форму комментирования прописывайте в файле шаблона, который отвечает за вывод комментариев: comments.php.

В facebook виджете есть один нюанс: с таким кодом у facebook виджета на всех страницах комментарии будут сливаться в один поток. То есть в виджете будут отображаться комментарии со всех страниц домена, а не для каждой страницы отдельно. Чтобы комментарии отображались для каждой страницы отдельно нужно во второй части кода, там где у меня

data-href=»http://elims.org.ua»

вместо url главной страницы «http://elims.org.ua» писать url страницы на которой находится посетитель.

В результате для WordPress вторая часть кода будет выглядеть вот так:

или так для любого сайта:

Виджет комментариев Google+

С виджетом комментариев от Google+ все просто, нужно лишь прописать в файл comments.php следующий код:

Если эти три виджета добавить к себе на сайт, то это будет выглядеть вот так

Размещение виджетов во вкладках используя jquery

Мне больше нравится вариант, если эти формы комментирования раскидать по вкладкам, чтобы это выглядело вот так:

Для этого сначала прописываем где-либо (например в header.php) вот этот javascript код:

$(function()< $(‘dl.tabs dt’).click(function()< $(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); >); >);
Если jquery уже определен в шаблоне то можно прописать только вот это:
$(function()< $(‘dl.tabs dt’).click(function()< $(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); >); >);

Если не заработает, то вместо знака доллара «$» пишем «jQuery» вот так:

jQuery(function()< jQuery(‘dl.tabs dt’).click(function()< jQuery(this).siblings().removeClass(‘selected’).end().next(‘dd’).andSelf().addClass(‘selected’); >); >);

В файле style.css пишем этот код:

#page .tabs .tabs dt .tabs dt:hover .tabs dt.selected .tabs dd .tabs dd.selected .tabs .tab-content

В файле comments.php пишем вот это:

Части с определением внешних js-скриптов для Вконтакте и Facebook в вышеуказанном скрипте не присутствуют, то есть их нужно описать отдельно, например в файле header.php

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

Размещение виджетов во вкладках без jquery

Выглядеть будет вот так:

В этом варианте не придется использовать jquery и Facebook-виджет будет подгружаться независимо от того, какая вкладка по умолчанию активна.

Код для файла style.css:

.tabscomment .tabscomment > label < display:block;float:left;font-family:Verdana;padding:5px 0; font-weight: bold;color:#5d7fa3;position:relative;text-align:center;z-index:1; background:#f5f5dc; /* Цвет фона кнопок */ border-radius:6px 6px 0 0; /* Радиус закругления кнопок */ cursor:pointer; /* Вид курсора при наведении на кнопки */ top: 2px;/* Высота подъема кнопки при наведении курсора */ width:100px; /* Длинна кнопок */ margin:0 5px 0 0; /* Отступы от кнопок */ >.tabscomment > input .tabscomment > label:hover #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3, #tab_4:checked ~ #tab_l4 < font-family:Verdana;font-weight:bold;background:#5d7fa3;color:#fffffe;top:0px; >.tabs_cont < background:#f7f7f7;border-radius:0 6px 6px 6px;padding:10px 15px;position:relative;z-index:2; >.tabs_cont > div #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3, #tab_4:checked ~ .tabs_cont #tab_c4 < position:static;left:0;opacity:1; >.comments-title .fb-mod a < outline: none; color: #5d7fa3; >a:hover

Опять таки в этом коде нет определения внешних скриптов для Вконтакте и Facebook, их нужно прописать отдельно

Используемые источники и полезные ссылки:

• Как совместить комментарии WordPress, Facebook и Вконтакте?
• Виджет совмещенных комментариев без скриптов на CSS
• Установка социальных кнопок на сайт
• Асинхронная загрузка скриптов социальных сетей

Источник: seosait.com