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


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

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


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

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

В шаблоне 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


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



Похожие публикации

Настольная книга невесты - перезапуск

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

Сайт для школы Каратэ

Мартовская работа нашей студии - официальное представительство школы Каратэ Киокушинкай из города Красное Село. Киокушинкай - контактный стиль каратэ, созданный в 50-е годы XX столетия Масутацу... читать далее

OpenID Mod авторизации для DLE

ОБНОВЛЕНИЕ! Представляем вам долгожданный модуль OpenID авторизации на сайтах работающих на движке DataLife Engine. Модуль использует Loginza.API, позволяет авторизироваться с помощью следующих... читать далее

Кросспостинг свежих материалов вашего сайта в блогохостингах и социальных сетях

Если кратко: вышла на вашем сайте свежая публикация и тут же автоматически анонс статьи ушел в ваш бложек на жж, я.ру и твиттер. Из чего, собственно строится подобная система позволяющая... читать далее

Как добавить OpenID на сайт

OpenID - несомненно, полезный механизм как для пользователей, так и для владельцев сетевых ресурсов. Пользователям он даёт: Возможность запомнить один логин и один пароль и использовать его везде... читать далее

Мобильная версия сайта и оперативное получение новостей

Предлагаем вашему вниманию статью опубликованную на сайте нашего клиента - проекте Ana-sm.ru Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том,... читать далее

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

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

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

    Мой блог http://blogo7e.ru
    • 0

       

  2. #2 написал: TCSE
    Группа: Администраторы
    15 апреля 2011 11:42

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


    такой функции по умолчанию нет.
    для указания своего сайта, необходимо зарегистрироваться на ДЛЕ-сайте и указать все необходимые данные (в том числе свой сайт) на странице профиля.
    • 0

       

  3. #3 написал: Raisa
    Группа: Гости
    15 апреля 2011 12:29

    Посмотрела, у меня в профиле нет такой строчки, чтоб сайт вписать.
    Может это какой-нибудь модуль или еще что нить надо установить?
    • 0

       

  4. #4 написал: тестовый комментатор
    Группа: Гости
    15 апреля 2011 13:20

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



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

    онлайн справка http://dle-news.ru/extras/
    • 0

       

  5. #5 написал: Talik
    Группа: Администраторы
    15 апреля 2011 13:31

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




    • 0

       

  6. #6 написал: Raisa
    Группа: Гости
    15 апреля 2011 17:41

    Спасибо, попробую
    • 0

       

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

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

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

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

    Как правильно интегрировать виджет комментариев, что бы каждый комментарий соответствовал своей новости? Заранее спасибо за ответ!
    • 0

       

  8. #8 написал: Talik
    Группа: Администраторы
    5 августа 2011 12:20

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


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

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



    а конкретно выберите значение Страница
    • 0

       

  9. #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. #10 написал: Михаил
    Группа: Гости
    21 декабря 2011 04:12

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

       

  11. #11 написал: Talik
    Группа: Администраторы
    21 декабря 2011 21:50

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


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

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

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

    надеюсь само разрулится
    • 0

       

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

    Чет не работает у меня комменты вконтакте.. (((
    • 0

       

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

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


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


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

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

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

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

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

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

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


    проверьте работу формы камментов вконтакте на статической странице своего домена. сделайте голый html файл и убедитесь в его работе.
    • 0

       

  14. #14 написал: Михаил
    Группа: Гости
    12 января 2012 16:24

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

    Пример:
    http://www.kulolo.ru/read/article/148-fa
    cebook-vvel-sekretnye-smayliki.html
    • 0

       

  15. #15 написал: TCSE
    Группа: Администраторы
    12 января 2012 16:47

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


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

       

  16. #16 написал: migel_kara
    Группа: Гости
    15 января 2012 03:20

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

    Всё закрыто, яваскрипт в норме...
    • 0

       

  17. #17 написал: mnogoigr
    Группа: Гости
    28 мая 2012 18:15

    Мне понравилось! Посоветовал и друзьям
    • 0

       

  18. #18 написал: nekspsy
    Группа: Гости
    4 декабря 2012 21:01

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

    Заранее спасибо!
    • 0

       

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

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

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

       

  20. #20 написал: TCSE
    Группа: Администраторы
    6 декабря 2012 12:03

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

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


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

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

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

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


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

    Facebook (<fb:comments-count href={full-link}></fb:comments
    -count>)
    • 0

       

  21. #21 написал: doc
    Группа: Гости
    15 января 2013 01:03

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

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

    к dle тоже можно прикрутить, походу
    • 0

       

  22. #22 написал: TCSE
    Группа: Администраторы
    15 января 2013 12:51

    doc, да, вывод количества камментов от ВК будет очень даже в тему :)
    ждем хак под ДЛЕ
    • 0

       

  23. #23 написал: Сергей
    Группа: Гости
    3 мая 2013 16:23

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

    Заранее спасибо!
    • 0

       

  24. #24 написал: TCSE
    Группа: Администраторы
    3 мая 2013 19:22

    Цитата: Сергей
    но окошко с комментами от дле стало меньше по разиерам, как, где можно указать параметр его ширины?


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

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


    на этом сайте указано width: 490px;
    • 0

       

  25. #25 написал: Сергей
    Группа: Гости
    12 мая 2013 20:59

    Установлено по умолчанию ВКонтакте, но пока не на жмешь на комментарии и обратно виджет ВКонтакте не появляется, а также с комментариями пока не нажмешь оставить комментарий... Это в стандартном шаблоне default
    Заранее спасибо!
    • 0

       

  26. #26 написал: Леонид
    Группа: Гости
    21 сентября 2013 04:20

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


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

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

       

  27. #27 написал: TCSE
    Группа: Администраторы
    21 сентября 2013 14:07

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


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


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

    для реализации необходимо писать свой велосипед и подключать через API вконтакта.
    • 0

       

  28. #28 написал: tania45
    Группа: Гости
    29 декабря 2013 22:40

    Очень полезная информация. Обязательно приму к сведению.
    • 0

       

  29. #29 написал: Владимир
    Группа: Гости
    13 февраля 2014 13:24

    Очень полезная информация. Респект
    • 0

       

  30. #30 написал: Econ Dude
    Группа: Гости
    3 декабря 2016 11:40

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

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

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

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Вопрос:

Александр Сергеевич Пу...

Ответ: *

Кликните на изображение чтобы обновить код, если он неразборчив

Архив сайта

Реклама на сайте

Остеклить балкон
www.okna-technology.ru
Накрутка лайков подписчиков быстро бесплатно
vto.pe