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

Question

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

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

like;

var disqus_shortname = '';

var disqus_identifier = '';

var disqus_url = '';

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

Итак, чтобы подвести итог;несколько случаев разногласий на одной странице.как?кто-то еще сделал это?

Спасибо

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

Я написал статью об этом, найти ее здесь. 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);
    }
};

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

Answer 3

Предположительно, по состоянию на 17 июля 2012 года Disqus 2012 теперь снова поддерживает "сброс".

Answer 4

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

<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>

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

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

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

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

Answer 5

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 6

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

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

Основные выводы:

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

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

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

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

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

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

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

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

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

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

Answer 8

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