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.
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();
}
}
You may try http://tsi.github.io/inlineDisqussions/
It will give you per-paragraph comment threads powered by Disqus.
Just download the script and the style sheet and include them (after jQuery).
Then call the script like this:
<script>
disqus_shortname = 'your_disqus_shortname';
jQuery(document).ready(function() {
jQuery("p").inlineDisqussions();
});
</script>
See the linked page for more info.
disclaimer: I wrote this.
This might help. My backend is WordPress/PHP. I use this code in conjunction with Elementor.
This code loads Disqus in separate Iframes 'src'. The page identifier/URL gets pulled by PHP for each individual post.
<iframe id="disqus" srcdoc="<div id='disqus_thread'></div>
<script>
var disqus_config = function () {
this.page.url = '<?php echo get_permalink(); ?>';
this.page.identifier = '<?php echo get_permalink(); ?>';
};
(function() { // DONT EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://XXXXXXXX.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='https://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>" >
<p>Your browser does not support iframes.</p>
</iframe>
精彩评论