Комментарии ВКонтакте для DLE

Собственно встал вопрос врезания комментариев от ВК.КОМ в данный сайт на движке DLE. Итак, что бы это сделать необходимо.

1. Для интеграции комментариев Вконтакте на DLE необходимо иметь регистрацию в контакте – http://vk.com/

2. Заходим в http://vk.com/developers.php

3. В разделе сайт\приложения выбрать “Подключить новый сайт“.

4. Вписываем название сайта (произвольное), потом адрес в форме http:\\ваш_сайт.ру основной домен заполнится автоматически, изменять не знающим что это такое крайне не рекомендуется. Можете поставить галочку включить расширенные комментарии, а так же выбрать ширину выводимых комментариев Вконтакте (по умолчанию стоит 496 px). Нажимаем “Сохранить”.

5. Получаем код вида:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>

<script type="text/javascript">
  VK.init({apiId:ВАШ_ИНДИВИДУАЛЬНЫЙ_НОМЕР, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

6. Заходим в main.tpl между тегами

<head>...</head>

Вписываем следующее:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>

<script type="text/javascript">
  VK.init({apiId:ВАШ_ИНДИВИДУАЛЬНЫЙ_НОМЕР, onlyWidgets: true});
</script>

это код, который выдал нам девелопер Вконтакте.

7. Заходим в fullstory.tpl в самый конец вписываем код вида:

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

Собственно в итоге мы имеем вид: строка на писаний комментарий DLE, строка вывода комментарий DLE (в различных стилях вариация различна), затем идут комментарии от ВК.КОМ. Нравится ли вам такой вывод? Если да, то дальше информация не для вас, если же вы хотите сделать вывод комментариев как на данном сайте, тогда продолжим.

Для вывода комментариев ВКонтакте в виде переключающегося списка необходимо:

2.1. Открываем main.tpl между

<head>...</head>

вставляем код вида:

<script type="text/javascript">
$(document).ready(function() {

    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show();

        $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").hide(); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn(); 
        return false;
    });

});
</script>

Это скрипт который будет идентифицировать наши вкладки комментариев.

2.2. Открываем fullstory.tpl и убираем изменения в нем, которые были внесены в пункте 7 данной статьи.

2.3 Теперь в fullstory.tpl в самом конце вписываем следующий код:

<ul class="tabs">
    <li><a href="#tab1">Комментарии</a></li>
    <li><a href="#tab2">Vkontakte</a></li>
</ul>

<div class="tab_container">

    <div id="tab1" class="tab_content">
{comments}
{addcomments}
    </div>

    <div id="tab2" class="tab_content">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>    </div>
</div>

Где widrh: “496” – Это ширина выводимого блока комментариев ВКонтакте.

Это практически все, но есть одно “но”. Немного корректируя данный код вы можете сделать вкладку комментариев от того же Facebook, для этого чуть ниже

<li><a href="#tab2">Vkontakte</a></li>

пропишите

<li><a href="#tab2">НАПРИМЕР_FACEBOOK</a></li>

,
и в самом конце перед последним закрывающимся тегом вставьте

<div id="tab3" class="tab_content">

так можно продолжать до бесконечности изменяйте только id div’a tabN, где N- номер следующей вкладки.

Так же рекомендовано после данного DIV’a прописывать стандартизированный DIV, прописанного в вашем css.

На этом статья как интегрировать комментарии ВКонтакте в DLE заканчивается. Буду рад ответить на ваши вопросы и пожелания.

Понравилась статья? - поделись с друзьями!

Категория: DLE

  • Вопрос такого рода как сделать вывод в короткой новости количества комментариев в {comments-num} заменив стандрат на количество с вк?

    • Добрый день!
      Через методы VK.Api, к сожалению детально данным вопросом не занимался. Нашел такой пример:
      VK.Api.call(‘widgets.getComments’,
      {widget_api_id: “ВАШ ID”, url: document.URL},
      function(obj) {
      document.getElementById(‘vk_count’).innerHTML = ‘всего:’ + obj.response.count;
      });