javascript 一页上有几个 Disqus 线程

Several disqus-threads on one page

提问by Espen Schulstad

we have a website where we have list a lot of events, and would like to add discussions to each of the events.

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

So we wanted to use disqus, and checked it out. Turns out they use global variables to configure the instance.

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

like;

喜欢;

var disqus_shortname = '';

var disqus_identifier = '';

var disqus_url = '';

This poses a problem for us, when we don't want to use the same identifier, but rather a unique one per disqus instance. tried putting each instantiation + configuration in iframes, but that really screwed up ie8. is there a better way of doing it?

这给我们带来了一个问题，当我们不想使用相同的标识符，而是每个 disqus 实例使用唯一的标识符时。尝试将每个实例化 + 配置放在 iframe 中，但这真的把 ie8 搞砸了。有更好的方法吗？

So, to sum it up; several instances of disqus on one page. how? has someone else done it?

所以，总结一下；一页上的几个 disqu 实例。如何？有其他人做过吗？

Thanks

谢谢

采纳答案by Julian

We faced a similar issue and emailed Disqus about this. They confirmed that by default they only support one Disqus module per page.

我们遇到了类似的问题，并就此通过电子邮件发送给 Disqus。他们确认默认情况下，他们每页仅支持一个 Disqus 模块。

When browsing the Disqus JS documentation, I did find a solution that might work for you by loading and unloading the Disqus modules as the user interacts with the site:

在浏览 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/

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

The exact implementation would depend upon your site, but this should give you a building block to start from. For example, if the event information becomes available by expanding a content area, you could load the Disqus module whenever someone expands the event content.

确切的实现将取决于您的站点，但这应该为您提供一个构建块。例如，如果事件信息通过扩展内容区域变得可用，您可以在有人扩展事件内容时加载 Disqus 模块。

回答by mystrdat

I wrote an article about this, find it here. http://mystrd.at/articles/multiple-disqus-threads-on-one-page/

我写了一篇关于这个的文章，在这里找到它。http://mystrd.at/articles/multiple-disqus-threads-on-one-page/

In essence, if you're fine with displaying a single module at a time and using some sort of a "show comments" control, you could do it the following way (using Wordpress and jQuery as an example, but you can adjust the content identifiers based on your needs). In a post loop, insert an extra control for each:

从本质上讲，如果您可以一次显示一个模块并使用某种“显示评论”控件，则可以按以下方式进行（以 Wordpress 和 jQuery 为例，但您可以调整内容标识符根据您的需要）。在 post 循环中，为每个插入一个额外的控件：

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

Afterwards you need a generic function that will use those post parameters and reload Disqus on demand. Mind that the 2012 version of Disqus doesn't have the reset() method yet and therefore this will not work with it.

之后，您需要一个通用函数，该函数将使用这些发布参数并按需重新加载 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);
    }
};

Other than this, I believe you would have to resort to using iframes. Such a solution with Ruby as an example is outlined here - http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box-in-single-page/

除此之外，我相信您将不得不求助于使用 iframe。此处以 Ruby 为例概述了这种解决方案 - http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box-in-single-page/

回答by V Hudson

Supposedly as of 17 July 2012, Disqus 2012 now supports "reset" again.

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

回答by Mike Houston

I needed to use Disqus from a GWT app, so I needed to solve the problem of loading threads on demand as virtual pages in the app were changed.

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

A small amount of reverse engineering and experimentation led me to construct a utility class (below).

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

The main insights are:

主要见解是：

1. There is an undocumented global parameter called disqus_container_idwhich allows you to place the comments wherever you like. If that doesn't work in some future version, my fallback was going to be to temporarily set the id of the target element to disqus_thread, add the comments and then change it back to the original id.
2. Since this was being developed for GWT using JSNI, I needed to set the global parameters in the original window context, accessible through $wnd. I changed the default Disqus embed code accordingly. I didn't realise before that all global variables are in the Window object, but I learned something new.
3. You can re-use the same container, Disqus seems to clear the contents when you activate it.
4. This leaves lots of copies of the script tag in the DOM. Maybe it would be a good idea to clean these up too once they've been used. Alternatively, I might do some more experiments using the DISQUS.resetmethod described in other answers.

1. 有一个未公开的全局参数被调用disqus_container_id，它允许您将评论放在任何您喜欢的地方。如果这在未来的某个版本中不起作用，我的回退是暂时将目标元素的 id 设置为disqus_thread，添加注释，然后将其更改回原始 id。
2. 由于这是使用 JSNI 为 GWT 开发的，因此我需要在原始窗口上下文中设置全局参数，可通过$wnd. 我相应地更改了默认的 Disqus 嵌入代码。之前我没有意识到所有全局变量都在 Window 对象中，但我学到了一些新东西。
3. 你可以重复使用同一个容器，当你激活它时，Disqus 似乎会清除内容。
4. 这会在 DOM 中留下大量脚本标签的副本。也许在使用它们后也将它们清理干净也是个好主意。或者，我可能会使用DISQUS.reset其他答案中描述的方法进行更多实验。

Extracting just the crucial information for someone using JS on its own, this should allow you to stick a Disqus thread anywhere you like:

仅为使用 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);
    })();
}

And here is the full GWT utility class. I've only implemented the parameters I needed so far.

这是完整的 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);
        })();
    }-*/;
}

回答by Pedro Soares

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

回答by Saeven

I iterated through the solutions above, and none worked out of the box. Checking through source, I cobbled this, which works. It's not far off, but makes all the difference it seems.

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

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

In your markup, put the standard:

在您的标记中，输入标准：

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

And then in your click actions, it's pretty simple. I had a member called 'data' that I was getting back from an AJAX call.

然后在您的点击操作中，这非常简单。我有一个名为“data”的成员，我正在从 AJAX 调用中返回。

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

This worked for me, solving a problem in the code above that had similar comments being passed between several threads.

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

I'm showing my Disqus thread in a Bootstrap modal, I call loadDisqus before the call to $(el).moda('show') and it is seamless.

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

回答by Fred John

I know this question is very old but as I have faced the same issue I found a work around that worked pretty good for me.

我知道这个问题很老了，但是当我遇到同样的问题时，我找到了一个对我来说非常好的解决方法。

I currently have a page - lets call it Album - that lists a series of images belonging to that album.

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

Clicking on an image will pop up a lightbox with the current image and a special sidebar that fetches via ajax current image information such as title, date, author, comments etc.. (Very similar to facebook image viewer/sidebar comments)

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

I wanted users to be able to comment on the main album page but also on the specific image they are viewing inside the lightbox sidebar.

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

Thanks to some callback functions that belong to the lightbox, one was run whenever lightbox was opened, which I have used to rename temporarly the div 'disqus_thread' in the main album page to something else.

多亏了一些属于灯箱的回调函数，只要打开灯箱就会运行一个回调函数，我曾经用它暂时将主专辑页面中的 div 'disqus_thread' 重命名为其他东西。

Another callback was run whenever you changed images inside the lightbox - which allowed me to reload the sidebar information regarding the image where I have included a new disqus_thread div and a javascript forcing a disqus_reset.

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

And the other callback runs when the lightbox closes which allows me to rename the album comment div back to disqus_thread and force another reset.

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

So to summarize, the main page contains the comments for the album, when you click on an image I rename the original div to something else. Then some information is fetched via AJAX which contains a new disqus_thread div. I use DISQUS.reset and the comments load on the lightbox. When I close the lightbox I rename the original div back to disqus_thread and force another reset.

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

I hope it helps someone!

我希望它可以帮助某人！

回答by Keegan Street

You could load each instance in through an iframe. You might have to have in-page scroll bars though... yuck.

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