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 can 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 only when readers scroll down to the comment section.

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.

Loading Disqus on Scrolling with AJAX

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

var disqus_div = $("#disqus_thread");
if (disqus_div.size() > 0 ) {
var ds_loaded = false,
top = disqus_div.offset().top,
disqus_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 + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

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.

<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.

<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.