HackingUniversity - Hacks . Tricks . How-To's

20 June 2015

How to Load Disqus Comments on Scroll in Blogger Blog

Commenting helps any blogger to view the remarks of the reader or customer coming to his site, with comments he can notified about the bad content in the post, maybe some outdated post or anything. Readers can even pass suggestion on implementing something or fixing the bad part. Comments even helps you to build nice backlinks from other blogs where you can pass some good review and pass a relevant link to your blog or some other resource.

Disqus comments on scroll

Well now when it comes to implement the best commenting system in blogger Disqus tops the list with majority of blogs installed with disqus. With its simple user interface, faster loading and cool settings you can sure to greet your visitors with best commenting experience.

Also: How to Install Livefyre Commenting System in Blogger

Disqus even started the money making system for the publishers where they display content from all the world blogs and when someone clicks on those links you get paid to send visitors and vice versa happens your content is also streamed to those blogs.

Increase Blogs Loading Speed - Load Disqus on Scroll

Now you might have seen this on my blog earlier, but that was not the perfect trick which I implemented, that was using the ID system and sometimes comments loaded automatically. But now I have implemented the proper scroll loading technique for disqus that helps me in increasing the blogs loading time and loading disqus comments automatically when someone scrolls to the bottom of the page.

If you are facing blog loading issues then this could be one way to increase your blogs loading speed but using disqus on scroll load. Check below steps to implement it.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for </head> tag & paste below Jquery Script. (Jquery is important for this to work, if you have already pasted this then leave this step and proceed further).

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>

  3. Now again search for </body> tag & paste below code above it.

    <script>var disqus_identifier=window.location.url,ds_loaded=!1;function loadDisqus(){var a=$(&quot;#disqus_thread&quot;),b=a.offset().top,a=a.data();if(!ds_loaded&amp;&amp;$(window).scrollTop()+$(window).height()&gt;b){ds_loaded=!0;for(var c in a)&quot;disqus&quot;==c.substr(0,6)&amp;&amp;(window[&quot;disqus_&quot;+c.replace(&quot;disqus&quot;,&quot;&quot;).toLowerCase()]=a[c]);b=document.createElement(&quot;script&quot;);b.type=&quot;text/javascript&quot;;b.async=!0;b.src=&quot;http://&quot;+window.disqus_shortname+&quot;.disqus.com/embed.js&quot;;(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(b)}}$(function(){0&lt;$(&quot;#disqus_thread&quot;).size()&amp;&amp;$(window).scroll(loadDisqus)});</script>

  4. Now search for <data:post.body/> and paste below code below it. (this code is used to install anything below the post body, in case you wanna install the discus comments somewhere else, then search for that code and paste below code after it.)

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div data-disqus-shortname='HackingUniversity' id='disqus_thread'/>
    </b:if>

  5. As you can see I have used the conditional tags, so that disqus comments load only on the post page, not the homepage.
  6. Make sure to change the disqus short name from HackingUniversity to your own, you get see that in your disqus profile.

That's it now try to refresh your blog and open any post, now as soon as you will scroll to the bottom of your page, you will be able to see how disqus comments load automatically. You can check mine and share your opinion below.