Несколько disqus-потоков на одной странице

Question

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

Итак, мы хотели использовать disqus и проверили его. Оказывается, для настройки экземпляра они используют глобальные переменные.

like;

var disqus_shortname = ''; 

var disqus_identifier = ''; 

var disqus_url = ''; 

Это создает проблему для нас, когда мы не хотим, чтобы использовать один и тот же идентификатор, а уникальный один за Disqus экземпляра. попробовал помещать каждую инстанцирование + конфигурацию в iframe, но это действительно испортило ie8. есть ли лучший способ сделать это?

Итак, подведем итоги; несколько экземпляров disqus на одной странице. как? кто-то еще это сделал?

Благодаря

Answer 1

Мы столкнулись с аналогичной проблемой и отправили по электронной почте Disqus об этом. Они подтвердили, что по умолчанию они поддерживают только один модуль Disqus на страницу.

При просмотре документации Disqus JS, я нашел решение, которое могло бы работать для вас загрузки и выгрузки модулей Disqus, как пользователь взаимодействует с сайтом:

DISQUS.reset({ 
    reload: true, 
    config: function() { 
    this.page.identifier = "newidentifier"; 
    this.page.url = "http://example.com/#!newthread"; 
    } 
}); 

http://docs.disqus.com/help/85/

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

Answer 2

Вы можете загрузить каждый экземпляр в через IFRAME. Возможно, вам придется иметь полоски прокрутки на странице, хотя ... yuck.

Answer 3

Я написал статью об этом, найдем здесь. http://mystrd.at/articles/multiple-disqus-threads-on-one-page/

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

<a onclick="loadDisqus(jQuery(this), '<?= $id ?> <?= $post->guid ?>', '<? the_permalink() ?>');"> 
    Show comments 
</a> 

Затем вам нужна обобщенная функция, которая будет использовать эти почтовые параметры и перезагружать Disqus по требованию. Имейте в виду, что версия Disqus версии 2012 еще не имеет метода reset(), и поэтому это не сработает.

// global vars used by disqus 
var disqus_shortname = 'yoursiteshortnameindisqus'; 
var disqus_identifier; // made of post id   guid 
var disqus_url; // post permalink 

function loadDisqus(source, identifier, url) { 
    if (window.DISQUS) { 
     jQuery('#disqus_thread').appendTo(source.parent()); // append the HTML to the control parent 

     // if Disqus exists, call it's reset method with new parameters 
     DISQUS.reset({ 
      reload: true, 
      config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
      } 
     }); 
    } else { 
     //insert a wrapper in HTML after the relevant "show comments" link 
     jQuery('<div id="disqus_thread"></div>').insertAfter(source); 
     disqus_identifier = identifier; // set the identifier argument 
     disqus_url = url; // set the permalink argument 

     // append the Disqus embed script to HTML 
     var dsq = document.createElement('script'); 
     dsq.type = 'text/javascript'; 
     dsq.async = true; 
     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
     jQuery('head').appendChild(dsq); 
    } 
}; 

Помимо этого, полагаю, вам придется прибегать к использованию фреймов. Ниже приведено такое решение с Ruby: http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box-in-single-page/

Answer 4

Предполагается, что с 17 июля 2012 года Disqus 2012 теперь поддерживает «перезагрузку».

Answer 5

Мне нужно было использовать Disqus из приложения GWT, поэтому мне нужно было решить проблему загрузки потоков по требованию при изменении виртуальных страниц в приложении.

Небольшое количество обратного проектирования и экспериментов привело меня к созданию служебного класса (см. Ниже).

Основные идеи являются:

1. Существует недокументированная глобальный параметр называется disqus_container_id , который позволяет размещать комментарии везде, где вам нравится. Если это не сработает в какой-то будущей версии, моим откатом будет временно установить идентификатор целевого элемента на disqus_thread, добавить комментарии и затем сменить его обратно на исходный идентификатор.
2. Поскольку это было разработано для GWT с использованием JSNI, мне нужно было установить глобальные параметры в исходном контексте окна, доступный через $wnd. Я изменил по умолчанию код для размещения Disqus. Я не знал, что все глобальные переменные находятся в объекте Window, но я узнал что-то новое.
3. Вы можете повторно использовать один и тот же контейнер, Disqus, кажется, очищает содержимое, когда вы активируете его .
4. Это оставляет много копий тега сценария в DOM. Может быть, это была бы хорошая идея, чтобы очистить их тоже, как только они были использованы. В качестве альтернативы, я мог бы провести несколько экспериментов с использованием метода DISQUS.reset, описанного в других ответах.

Распаковка только важную информацию, для кого-то с помощью JS самостоятельно, это позволит вам прикрепить нить Disqus где угодно:

function loadComments(container_id, shortname, identifier, developer) { 
    // CONFIGURATION VARIABLES 
    window.disqus_container_id = container_id; 
    window.disqus_developer = developer ? 1 : 0; 
    window.disqus_shortname = shortname; // required 
    if (identifier) window.disqus_identifier = identifier; 

    // DON'T EDIT BELOW THIS LINE 
    (function() { 
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
     dsq.src = 'http://' + shortname + '.disqus.com/embed.js'; 
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
    })(); 
} 

А вот полный GWT утилита класса. Я только что реализовал параметры, которые мне нужны до сих пор.

import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.Random; 
import com.google.gwt.user.client.ui.Widget; 

public class Disqus { 

    public static boolean developer = false; 
    public static String shortname; 

    public static void showComments(Widget where, String identifier) { 
     showComments(where.getElement(), identifier); 
    } 

    public static void showComments(Element where, String identifier) { 
     if (shortname == null) 
      throw new IllegalArgumentException(
         "You must specify the disqus shortname before displaying comments"); 

     // Store the original id of the target element 
     String id = where.getId(); 
     if (id == null) { 
      id = "disqus-" + Integer.toHexString(Random.nextInt()); 
      where.setId(id); 
     } 

     // Update the id temporarily 
     where.setId("disqus_thread"); 

     // Load the comments 
     loadComments(id, shortname, identifier, developer); 
    } 

    private static native void loadComments(String container_id, String shortname, String identifier, boolean developer) /*-{ 
     // CONFIGURATION VARIABLES 
     $wnd.disqus_container_id = container_id; 
     $wnd.disqus_developer = developer ? 1 : 0; 
     $wnd.disqus_shortname = shortname; // required 
     if (identifier) $wnd.disqus_identifier = identifier; 

     // TODO 
     // disqus_url 

     // disqus_title 

     // disqus_category_id 

     // DON'T EDIT BELOW THIS LINE (sorry, I've edited it anyway) 
     (function() { 
      var dsq = $doc.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
      dsq.src = 'http://' + shortname + '.disqus.com/embed.js'; 
      ($doc.getElementsByTagName('head')[0] || $doc.getElementsByTagName('body')[0]).appendChild(dsq); 
     })(); 
    }-*/; 
} 

Answer 6

Я знаю, что этот вопрос очень старый, но поскольку я столкнулся с той же проблемой, я нашел работу, которая работала довольно хорошо для меня.

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

Нажав на изображение, вы увидите лайтбокс с текущим изображением и специальную боковую панель, которая извлекает через текущую информацию о текущем изображении ajax, такую ​​как название, дата, автор, комментарии и т. Д. (Очень похож на facebook image viewer/sidebar comments)

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

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

Другой обратный вызов выполнялся всякий раз, когда вы меняли изображения внутри лайтбокса, что позволяло мне перезагрузить информацию о боковой панели относительно изображения, в которое я включил новый disqus_thread div и javascript, заставляющий disqus_reset.

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

Итак, на главной странице содержатся комментарии к альбому, когда вы нажимаете на изображение. Я переименовываю оригинальный div в другое. Затем с помощью AJAX извлекается некоторая информация, которая содержит новый divqus_thread.Я использую DISQUS.reset и комментарии загружаются в лайтбокс. Когда я закрываю лайтбокс, я переименую исходный div обратно в disqus_thread и принудительно перезагружаю.

Надеюсь, это поможет кому-то!

Answer 7

Tente ISSO:

<div class="showDisqus" data-title="MyTitle" data-id="1" data-url="mysite.com/mypost">Show Comments</div> 

$('.showDisqus').on('click', function(){ // click event of the show comments button 
    var this_ = $(this); 
     disqus_shortname = 'your_shortname', 
     title = $(this).attr('data-title'), 
     identifier = parseFloat($(this).attr('data-id')), 
     url = $(this).attr('data-url'); 

    if (window.DISQUS) { 

     DISQUS.reset({ // Remove the old call 
      reload: false, 
      config: function() { 
      this.page.identifier = window.old_identifier; 
      this.page.url = window.old_url; 
      this.page.title = window.old_title; 
      } 
     }); 
     $('.showDisqus').show(); 
     $('#disqus_thread').remove(); 

     $('<div id="disqus_thread"></div>').insertAfter(this_); 

     setTimeout(function() { // Creates a new call DISQUS, with the new ID 
      DISQUS.reset({ 
       reload: true, 
       config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
       this.page.title = title; 
       } 
      }); 
      window.old_identifier = identifier; 
      window.old_url = url; 
      window.old_title = title; 
     }); 

    } else { 

     var disqus_identifier = parseFloat(identifier), 
      disqus_title = title, 
      disqus_url = url; 

     $('<div id="disqus_thread"></div>').insertAfter(this_); 

     (function() { 
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
     })(); 

     setTimeout(function() { // Sorry, there must be a better way to force the ID called correctly 
      DISQUS.reset({ 
       reload: true, 
       config: function() { 
       this.page.identifier = identifier; 
       this.page.url = url; 
       this.page.title = title; 
       } 
      }); 
     },500); 

     window.old_identifier = identifier; 
     window.old_url = url; 
     window.old_title = title; 

    } 
    $(this).fadeOut(); // remove the show comments button 
}); 

Answer 8

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

<script type="text/javascript"> 
var disqus_shortname = 'superchocolate', 
    disqus_identifier = 'default', 
    disqus_title  = 'I Heart Chocoloate', 
    disqus_config  = function(){ 
     this.language = 'en'; 
    }; 


(function() { 
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 



function loadDisqus(identifier, url, title) 
{ 
    DISQUS.reset({ 
     reload: true, 
     config: function() 
     { 
      this.page.identifier = identifier; 
      this.page.url  = url; 
      this.page.title  = title; 
      this.language  = 'en'; 
     } 
    }); 
} 
</script> 

В разметке, поставить стандарт:

<div id="disqus_thread"></div> 

И тогда в ваших действиях щелчка, это довольно просто. У меня был член под названием «данные», который я получал от вызова AJAX.

loadDisqus('ugc-' + data.id, location.protocol+'//'+location.hostname + "/ugc-submission-" + data.id + "/", data.title); 

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

Я показываю свою тему Disqus в модуле Bootstrap, я вызываю loadDisqus перед вызовом $ (el) .moda ('show'), и он является бесшовным.