Several disqus-threads on one page

Question

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

Answer 1

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

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.reset({
  reload: true,
  config: function () {  
    this.page.identifier = "newidentifier";  
    this.page.url = "http://example.com/#!newthread";
  }
});

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.

Answer 2

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.

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.

Answer 3

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 4

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)

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.

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.

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.

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.

I hope it helps someone!

Answer 5

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

Answer 6

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