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

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

При помощи виджета ВКонтакте Вы можете за 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

скачать архив для своего шаблона
templates.zip [1,49 Kb] (cкачиваний: 1277)

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

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

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

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

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

выписка с DLE-news.ru

названия пунктов: комментарии и вконтакте - отображают на странице заголовки вкладок, при этом 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

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

Наш специалист ответит вам в течении суток.

4 апреля 2011 29 58 952 скрипты комментарии вконтакте Версия для печати

Комментарии (29)

#1 написал: Raisa
Группа: Гости
15 апреля 2011 08:37

Подскажите, а можно в дле сделать в форме добавления комментариев помимо емейла адрес сайта, чтобы в имени оставалась ссылка? Для блога это актуально

Мой блог http://blogo7e.ru
0
#2 написал: TCSE
Группа: Администраторы
15 апреля 2011 11:42

Цитата: Raisa
Подскажите, а можно в дле сделать в форме добавления комментариев помимо емейла адрес сайта, чтобы в имени оставалась ссылка? Для блога это актуально

такой функции по умолчанию нет.
для указания своего сайта, необходимо зарегистрироваться на ДЛЕ-сайте и указать все необходимые данные (в том числе свой сайт) на странице профиля.
0
#3 написал: Raisa
Группа: Гости
15 апреля 2011 12:29

Посмотрела, у меня в профиле нет такой строчки, чтоб сайт вписать.
Может это какой-нибудь модуль или еще что нить надо установить?
0
#4 написал: тестовый комментатор
Группа: Гости
15 апреля 2011 13:20

Цитата: Raisa
Может это какой-нибудь модуль или еще что нить надо установить?

можно использовать поле "немного о себе"
или создать дополнительное поле для страницы профилей пользователей.

онлайн справка http://dle-news.ru/extras/
0
#5 написал: Talik
Группа: Администраторы
15 апреля 2011 13:31

Цитата: тестовый комментатор
создать дополнительное поле для страницы профилей пользователей.

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

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

Дополнительные поля доступны при просмотре комментариев и профиля пользователя, Вам необходимо в нужные шаблоны добавить тег [xfvalue_X], где X - значение поля (имя, которое Вы ввели при добавлении нового поля). Также можно использовать связку [xfgiven_X]...[/xfgiven_X].
0
#6 написал: Raisa
Группа: Гости
15 апреля 2011 17:41

Спасибо, попробую
0
#7 написал: willian
Группа: Гости
30 июля 2011 17:55

Подскажите пожалуйста, как правильно интегрировать google friend connect.

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

К примеру я добавил комент в новость1, но этот же комент выводится в новость2, новость3 и т.д.

Как правильно интегрировать виджет комментариев, что бы каждый комментарий соответствовал своей новости? Заранее спасибо за ответ!
0
#8 написал: Talik
Группа: Администраторы
5 августа 2011 12:20

Цитата: willian
Подскажите пожалуйста, как правильно интегрировать google friend connect.

Гаджеты / Настроить гаджет "Комментарии"

в настройках гаджета вам необходимо правильно указать параметр Область видимости

а конкретно выберите значение Страница
0
#9 написал: Talik
Группа: Администраторы
11 августа 2011 13:11
подсказка для тех, кто интегрирует блок комментариев от Facebook.com в движок DLE

получить код для своего сайта можно на странице developers.facebook.com

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

вместо стандартного

<div id="fb-root"></div>& ; #60;script src="http://connect.facebook.net /en_US/all.js#xfbml=1"></scr ipt><fb:comments href="site.ru" num_posts="10" width="500"></fb:com ments>

где site.ru - адрес вашего сайта
следуя спецтегам движка ДЛЕ ставим {full-link}

итого у нас получается следующие:

<div id="fb-root"></div>& ; #60;script src="http://connect.facebook.net /en_US/all.js#xfbml=1"></scr ipt><fb:comments href="{full-link}" num_posts="10" width="500"></fb:com ments>
0
#10 написал: Михаил
Группа: Гости
21 декабря 2011 04:12

Здравствуйте! Пытаюсь установить виджет на версию 9.4. Не работает переход между вкладками. Активная вкладка видна, а другая просто не открывается. Подскажите, пожалуйста, в чем может быть проблема? Спасибо.
0
#11 написал: Talik
Группа: Администраторы
21 декабря 2011 21:50

Цитата: Михаил
Активная вкладка видна, а другая просто не открывается.

у вас этот глюч случаем не в Гугл Хроме?

сегодня словил такой же на уже работающем с аналогичным плагином для вкладок на сайте ana-sm.ru

в Опере 11 работает как надо, а вот в Хроме - вкладки не переключаются...

надеюсь само разрулится
0
#12 написал: allasan
Группа: Гости
27 декабря 2011 17:33

Чет не работает у меня комменты вконтакте.. (((
0
#13 написал: Talik
Группа: Администраторы
27 декабря 2011 18:13

Цитата: allasan
Чет не работает у меня комменты вконтакте.. (((

уж очень анекдот напомнило...

Суд. Бракоразводный процесс. Судья спрашивает жену:

- По какой причине вы хотите развестись с мужем?

- Он меня как мужчина не удовлетворяет!

Женский голос из зала:

- Всех удовлетворяет, а её нет!

Мужской голос из зала:

- А её никто не удовлетворяет!

проверьте работу формы камментов вконтакте на статической странице своего домена. сделайте голый html файл и убедитесь в его работе.
0
#14 написал: Михаил
Группа: Гости
12 января 2012 16:24

Добрый день, помогите мне. Делал всё по инструкции но при нажатии на "добавить смайлик" ничего у меня не выходит.

Пример:
http://www.kulolo.ru/read/article/148-fa
cebook-vvel-sekretnye-smayliki.html
0
#15 написал: TCSE
Группа: Администраторы
12 января 2012 16:47

Цитата: Михаил
но при нажатии на "добавить смайлик" ничего у меня не выходит.

проверьте хтмл код - возможно не правильно закрыли теги.
или у вас ошибка в ява-скрипте отвечающая за вывод окошка со смайликами.
0
#16 написал: migel_kara
Группа: Гости
15 января 2012 03:20

Цитата: TCSE
проверьте хтмл код - возможно не правильно закрыли теги.
или у вас ошибка в ява-скрипте отвечающая за вывод окошка со смайликами.

Всё закрыто, яваскрипт в норме...
0
#17 написал: mnogoigr
Группа: Гости
28 мая 2012 18:15

Мне понравилось! Посоветовал и друзьям
0
#18 написал: nekspsy
Группа: Гости
4 декабря 2012 21:01

Подскажите, пожалуйста, сделал по инструкции, все получилось, но окошко с комментами от дле сильно сузилось, как, где можно указать параметр его ширины?

Заранее спасибо!
0
#19 написал: nekspsy
Группа: Гости
6 декабря 2012 01:04

Разобрался, теперь вопрос другой, как сделать вывод кол-ва сообщений, как у вас на сайте, :

Комментарии (17) ВКонтакте Facebook (5)
0
#20 написал: TCSE
Группа: Администраторы
6 декабря 2012 12:03
Цитата: nekspsy
Разобрался, теперь вопрос другой, как сделать вывод кол-ва сообщений, как у вас на сайте, :

Комментарии (17) ВКонтакте Facebook (5)

ну это сосвсем просто

в шаблоне полной новости fullstory.tpl напротив названий вкладок поставте соотвествующие теги

для Комментарии
будет выглядить так

Комментарии ({comments-num})

а для Фейсбука так

Facebook (<fb:comments-count href={full-link}></fb:comments -count>)
0
#21 написал: doc
Группа: Гости
15 января 2013 01:03

На хабре статья была про то как колличество показать

вот ссыль:
http://habrahabr.ru/post/130260/

к dle тоже можно прикрутить, походу
0
#22 написал: TCSE
Группа: Администраторы
15 января 2013 12:51

doc, да, вывод количества камментов от ВК будет очень даже в тему :)
ждем хак под ДЛЕ
0
#23 написал: Сергей
Группа: Гости
3 мая 2013 16:23

Подскажите, пожалуйста, сделал по инструкции, все получилось, но окошко с комментами от дле стало меньше по разиерам, как, где можно указать параметр его ширины?

Заранее спасибо!
0
#24 написал: TCSE
Группа: Администраторы
3 мая 2013 19:22
Цитата: Сергей
но окошко с комментами от дле стало меньше по разиерам, как, где можно указать параметр его ширины?

попробуйте изменить значение ширины в файле стилей

.section { width: 490px; background: #FFFFFF; margin: 0 0 30px; }

на этом сайте указано width: 490px;
0
#25 написал: Сергей
Группа: Гости
12 мая 2013 20:59

Установлено по умолчанию ВКонтакте, но пока не на жмешь на комментарии и обратно виджет ВКонтакте не появляется, а также с комментариями пока не нажмешь оставить комментарий... Это в стандартном шаблоне default
Заранее спасибо!
0
#26 написал: Леонид
Группа: Гости
21 сентября 2013 04:20

Цитата: TCSE
Facebook (<fb:comments-count href={full-link}></fb:comments -count>)

Большое спасибо за полезную инструкцию!

но с с ВКонтакте ({comments-num}) не выходит :(
0
#27 написал: TCSE
Группа: Администраторы
21 сентября 2013 14:07

Цитата: Леонид

но с с ВКонтакте ({comments-num}) не выходит :(

для виджета Вконтакте нет тега {comments-num} который бы выводил количество камментов :(

для реализации необходимо писать свой велосипед и подключать через API вконтакта.
0
#28 написал: tania45
Группа: Гости
29 декабря 2013 22:40

Очень полезная информация. Обязательно приму к сведению.
0
#29 написал: Владимир
Группа: Гости
13 февраля 2014 13:24

Очень полезная информация. Респект
0
#30 написал: Econ Dude
Группа: Гости
3 декабря 2016 11:40

Ну наконец-то кто-то толковый написал на эту тему. Христа ради прошу, объясните мне как использовать VK.Widgets.CommentsBrowse для вывода на одной странице всех последних комментов. Это есть в документации. https://vk.com/dev/widget_comments
Пункт 6, обзор комментов.

Я как-то случайно 2 раза это сделал и оно заработало, но очень криво.

Можете мне в ВК ответить? Пожалуйста. https://vk.com/e.dude
0