一页上有多个disqus-threads

Question

我们有一个网站，其中列出了很多活动，并希望为每个活动添加讨论。

所以我们想使用disqus，并检查了它。结果他们使用全局变量来配置实例。

喜欢;

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

我写了一篇关于此的文章，可以在这里找到。 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。请注意，2012 版本的 Disqus 还没有 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

据说从2012年7月17日起，Disqus 2012现在再次支持“重置”。

Answer 4

我需要从 GWT 应用程序使用 Disqus，因此我需要解决当应用程序中的虚拟页面发生更改时按需加载线程的问题。

少量的逆向工程和实验使我构建了一个实用程序类（如下）。

主要见解是：

1. 有一个未记录的全局参数，名为 disqus_container_id
   它允许您将评论放在您喜欢的任何地方。如果这在某些情况下不起作用
   未来版本，我的后备方案是临时设置目标的 id
   元素到 disqus_thread 中，添加注释，然后改回原来的 id。
2. 由于这是使用 JSNI 为 GWT 开发的，因此我需要设置全局
   原始窗口上下文中的参数，可通过 $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 5

帐篷是：

<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

我迭代了上面的解决方案，但没有一个是开箱即用的。通过检查源代码，我拼凑了这个，它有效。距离并不遥远，但看起来却截然不同。

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

这对我有用，解决了上面代码中的一个问题，该问题在多个线程之间传递了类似的注释。

我在 Bootstrap 模式中显示我的 Disqus 线程，我在调用 $(el).moda('show') 之前调用 loadDisqus，并且它是无缝的。

Answer 7

我知道这个问题很老了，但由于我遇到了同样的问题，我找到了一个对我来说非常有效的解决方法。

我目前有一个页面 - 我们称之为相册 - 列出了属于该相册的一系列图像。

单击图像将弹出一个灯箱，其中包含当前图像和一个特殊的侧边栏，该侧边栏通过 ajax 获取当前图像信息，例如标题、日期、作者、评论等。（与 facebook 图像查看器/侧边栏评论非常相似）

我希望用户不仅能够在相册主页上发表评论，还能够对他们在灯箱侧边栏中查看的特定图像发表评论。

感谢属于 lightbox 的一些回调函数，每当打开 lightbox 时就会运行一个回调函数，我用它来将主专辑页面中的 div 'disqus_thread' 临时重命名为其他名称。

每当您更改灯箱内的图像时都会运行另一个回调 - 这允许我重新加载有关图像的侧边栏信息，其中我包含了新的 disqus_thread div 和强制 disqus_reset 的 javascript。

另一个回调在灯箱关闭时运行，这允许我将专辑评论 div 重命名回 disqus_thread 并强制另一次重置。

总而言之，主页包含专辑的评论，当您单击图像时，我将原始 div 重命名为其他名称。然后通过 AJAX 获取一些信息，其中包含一个新的 disqus_thread div。我使用 DISQUS.reset 并将评论加载到灯箱上。当我关闭灯箱时，我将原始 div 重命名回 disqus_thread 并强制再次重置。

我希望它能帮助别人！

Answer 8

您可以通过 iframe 加载每个实例。不过，您可能必须有页内滚动条……哎呀。