Talik

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта

вот что говорится в официальной аннотация к данному виджету:

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

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



сама информация и конструктор виджетов располагается на странице vkontakte.ru/developers.php

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


подключаем новый сайт, вписываем все необходимые данные и после прохождения простейшей КАПЧи получаем готовый код для своего сайта

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


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

Код виджета делится на две части.
Первая размещается между тегами
<head>  </head>
, а вторая часть кода в том месте, где будет выводится сама форма для ввода комментария.

Что интересно, в принципе код можно не разбивать на составляющие а просто добавить в шаблон fullstory.tpl - проверяно, все прекрасно работает и так.

Рассмотрим вариант установки виджета комментариев на ДЛЕ сайт версии 7 или 8
(про самую свежую версию 9.2 будет ниже, в отдельном абзаце)

Так как по умолчанию виджет сохраняет адрес каждой уникальной страницы в своих настройках вывод формы комментариев вконтакте будем устанавливать аналогично стандартному модулю комментариев ДЛЕ, непосредственно в шаблон fullstory.tpl

Смотрим на результат... Как то не очень...

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


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

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта

для этого вам придется изменить код шаблона addcomments.tpl
Как добавить виджет комментарии вконтакте для ДЛЕ-сайта



А вот если у вас установлена самая свежая версия ДЛЕ 9.2 то можно улучшить отображение формы стандартных комментариев и виджета комментариев вконтакте.

Будем использовать вкладки с разными формами на jQuery тем более, что его поддержка встроена в движок DLE.

добавляем ява-срипт в папку вашего шаблона + отдельный css для оформления блока камментов.

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


Подключаем эти скрипты в главной странице шаблона main.tpl между тегами
<head>  </head>

т.е. добавляем две строки

<link rel="stylesheet" type="text/css" href="{THEME}/css/tabs.css" /><script type="text/javascript" src="{THEME}/js/tabs.js"></script>


если ли же Вы используете ДЛЕ версии ниже, чем 9.0, то так же необходимо подключить jQuery
делается это с помощью добавления строки

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

туда же, между тегами HEAD

скачать архив для своего шаблона
[attachment=3:templates.zip]


Далее обращаемся к документации с официального сайта поддержки ДЛЕ,

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

В шаблоне fullstory.tpl в конце страницы вставляем наш код.

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


Для тех, кто совсем не бум-бум поясняю.

Теги каммент отвечают за отображения на страницах сайта стандарной формы комментариев.



названия пунктов: комментарии и вконтакте - отображают на странице заголовки вкладок, при этом css класс current указывает какая вкладка по умолчанию будет активной.

в блоках между закоментированными строками вписываем наш код от виджета вконтакте.


<!-- section --><div class="section">  <ul class="tabs">    <li class="current">Комментарии</li>    <li>ВКонтакте</li>  </ul>  <!-- comment -->  <div class="box visible">    {addcomments}<br />{comments}{navigation}  </div>  <!-- .comment -->  <!-- vk -->  <div class="box">  ваш код полученный на сайте вконтакте  </div>  <!-- .vk -->  </div><!-- .section -->


Сохраняем страницу и наслаждаемся результатом.

Аналогично с использованием вкладок можно добавить формы комментирования и от других соц.сетей, например Google Мастер сообществ - позволяющий оставлять комментарий с помощью учетки от гугла или твиттера. Либо форма комментариев от Мордакниги. Или от твиттера, или как реализовано у нас, виджет комментариев от проекта РуТвит.

Код блока вкладок в этом случаи будет выглядить примерно так:

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


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

Полезный совет:
одной из вкладок в блоке добавления комментариев стоит сделать страницу со справочной информацией.
например такую:
Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


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



Дополнения к статье после комментариев посетителей

Можно как-то проверить, где появились новые комментарии? или нужно убет ходить по всем страницам и проверять комментарии на спамные ссылки ит.д?


На самом деле такая возможность появилась не так давно.
Если вы являетесь администратором виджета комментариев от вконтакта, то рядом с количество комментариев на старнице у вас появится кнопка администрирование

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


при клике на которую, отобразятся все комментарии на сайте, ане только те, что предназначены конкретно для этой страницы

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


И тут уже самостоятельно решайте на что отвечать, а что просто удалить.

Скажите, а как завлеч посетителя, чтобы он выбрал именно вкладку с Вконтакте? Хотелось бы еще более заметное удобное решение сделать. Ну это решение очень удобно, но хотелось бы, что бы посетитель понимал, что "Вконтакте" подразумевает под собой возможность комментирования сайта через систему Вконтакте.


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

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта


а вкладки с системой комментариев сайта и фейсбука обозначил количеством имеющихся комментариев.
Другой вариант придумать не смог belay