ajaxcommentsdisqus

Multiple DISQUS on the same page?


I need to insert the DISQUS system on a webpage of my website. Thats easy.

The problem here is that I need to insert multiple DISQUS boxes on the same page.

I need something like this. Every article and every paragraph has your own comment block.

Any suggestion? Maybe I need to load the comments using some kind of API via AJAX?

I'll use this on a page in my WordPress powered site.


Solution

  • You could try this trick here, it worked for me: http://collaborable.com/blog/disqus-jquery-hack-awesome-ux

    Unfortunately, the article is no longer available except via the Wayback Machine.

    The relevant portions from that link are as follows. To show / hide comments:

    <div class="comments">
      <p class="nocomment">
        <a class="nocomment" href="/">Hide comments</a>
      </p>
      <div class="disqus_thread"></div>
    </div>
    <p class="comment">
      <a class="comment"
        href="http://collaborable.com/blog/blog-entry-title"
        data-disqus-identifier="blog-entry-id">
        <span>Leave a comment</span>
      </a>
    </p>
    

    ...And the corresponding Javascript:

         // DISQUS vars.
        var disqus_shortname = 'collaborable';
        var disqus_identifier = '';
        var disqus_url = '';
    
         // Leave a comment/cancel.
        $('.entry a.comment').click(function () {
            // Firefox? Bad firefox.
            if ($.browser.mozilla && window.disqus_loaded) {
                return true;
            }
    
            // Init DISQUS.
            disqus_identifier = $(this).data('disqus-identifier');
            disqus_url = $(this).attr('href');
    
            // DISQUS requires each thread to have the ID #disqus_thread.
            $entry = $(this).parents('div.entry');
            $('#disqus_thread').removeAttr('id');
            $entry.find('div.disqus_thread').attr('id', 'disqus_thread');
    
            // Load DISQUS script, if not already loaded.
            if ($entry.find('div.disqus_thread .dsq-reply').length == 0) {
                $.getScript('http://' + disqus_shortname + '.disqus.com/embed.js',
                    function () {
                        window.disqus_interval =
                            setInterval('is_disqus_loaded("' + $entry.attr('id') + '")',
                                200);
                    }
                );
            }
    
            // Hide/kill other DISQUS forums.
            $entry.find('a.nocomment').trigger('click');
            $(this).find('span').addClass('loading');
            return false;
    
        });
    
         // Hide/kill all open DISQUS forums.
        $('.entry a.nocomment').click(function () {
            $('div.comments').slideUp('normal',
                function () {
                    $(this).find('.disqus_thread').empty();
                });
            $('p.comment').slideDown();
            return false;
        });
    
        function is_disqus_loaded(entry_id) {
            $entry = $('#' + entry_id);
            if ($entry.find('div.disqus_thread .dsq-reply').length) {
                clearInterval(window.disqus_interval);
                window.disqus_loaded = true;
                $entry.find('div.comments').slideDown();
                $entry.find('a.comment span').removeClass('loading');
                $entry.find('p.comment').slideUp();
            }
        }