AJAX load Disqus comments on Scrolling down the page

Load Disqus comments on Scroll event with AJAX and improve your website load time – JavaScript to load Disqus on Scrolling down for WordPress and Blogger.

In a previous post, we implemented loading Disqus on click event, when visitors don’t see the comment box unless they click the “Load Comment” button.

Loading Disqus on demand improves the load time of your blog site, but such an implementation may also lower down the number of comments on your posts, as most of the readers look for the comment box to leave a response, and when they don’t find it, they leave!

In this article, we’ll see how to avoid such a situation by loading Disqus comment box only when readers scroll down the page.

Note: While the tutorial proceeds, you may have to dig into the code of your blog or website; so make sure you have enough knowledge around editing and customizing your blog theme or template.

Asynchronously loading Disqus on Scroll-down

Follow the below given directions to load Disqus asynchronously on scrolling to the comment area.

1. Add this JavaScript code to your blog or website

$(function(){
var disqus_div = $("#disqus_thread");
if (disqus_div.size() > 0 ) {
var ds_loaded = false,
top = disqus_div.offset().top,
disqus_data = disqus_div.data(),
check = function(){
if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) {
ds_loaded = true;
for (var key in disqus_data) {
if (key.substr(0,6) == 'disqus') {
window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
}
}
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}
};
$(window).scroll(check);
check();
}
});

2. Now, add the Disqus division to create a comment area below your posts

The basic code for Disqus thread division is given below, that you may modify according to your platform:

<div id="disqus_thread" data-disqus-shortname="your_disqus_username" data-disqus-url="Post_Permalink"></div>

Don’t forget to replace your_disqus_username with your site’s disqus username and Post_Permalink to the post URL or Permalink function (eg. <?php the_permalink(); ?> for WordPress).

For the sake of convenience, I’m providing the above code in WordPress and Blogger supported formats.

WordPress

<div id="disqus_thread" data-disqus-shortname="your_disqus_username" data-disqus-url="<?php the_permalink(); ?>"></div>

WordPress users should replace <?php comments_template(); > in the single.php theme file with the above code.

Blogger

<div id="disqus_thread" data-disqus-shortname="your_disqus_username" expr:data-disqus-url='data:post.url'></div>

Blogger users, add this code above <b:includable id='comments' var='post'> section in your Blogger template. In order to stop displaying your Blogger comments with Disqus, hide them using your Blog Settings.

Save the changes.

Done! From now, you’ll be able to see your Disqus comments loading on scrolling down to comment section. Hope you found this useful.