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