Load Disqus Comment System On Demand to Reduce Page Loading Time

2
13

Disqus is one of the most popular commenting system which most pro bloggers use for their websites by replacing the default Blogspot blogger commenting system. Disqus can also be used with the wordpress websites and the reason why most of the bloggers prefer Disqus is that it has many features which the default commenting system doesn’t provides. Here I’m going to show you how to integrate Disqus comments in a more effective way with your website which will result in improving  your website’s load time.

disqus load on demand

The method which can be used for reducing the page load time with Disqus comment system is known as load-on-demand. By default the comments get loaded along with the page but in load on demand method the comments will only be displayed when the user wants them to view it. This will save the loading time which will be taken by the comments usually and as a result the website will rank better on Google.

Loading Disqus on Demand for Blogspot & WordPress

To load Disqus on demand you need to place two codes inthe template. One code is for the button and the other one is the javascript which will make the comments to load on demand.

Copy the below code and place in on your template where you need to insert the button. When a webpage is loaded the visitor will see this button instead of the comments and when this button is hit the comments will start to display.

<div id=”comments-catalyst”></div> // Code for button

Copy the below code and paste it just before the closing tag of the body inside your template.  This code will make the button to appear instead of the comment and helps in loading the comments in every page only when a user requests for it.

<script>
var disqus_shortname = ‘shortname‘; // Replace short name with your disqus short name

function loadComments(catalysts, links) { $(document).ready(function($){ if(typeof disqus_shortname !== “undefined”) { if(!catalysts) { catalysts = “#comments-access”; } catalyst_elements = $(catalysts); catalyst_link_elements = catalyst_elements.add(links); catalyst_link_elements.click(function() { $.ajaxSetup({ cache: true }); $.getScript(“http://” + disqus_shortname + “.disqus.com/embed.js”); $.ajaxSetup({ cache: false }); catalyst_elements.remove(); }); } }); } /* Function accepts 2 arguments e.g.: loadComments(“#my-custom-id”, “.link-element-1, .link-element-2”); */ loadComments();
</script>

Do not forget to replace the code in the red with your Disqus short name or else this code will not work. This code requires JQuery and works very smoothly. There are many popular websites which are using load on demand for Disqus such as Labnol.org and it’s time for you to change to load on demand commenting feature.

2
Leave a Reply

2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
  Subscribe  
newest oldest most voted
Notify of

Error parsing XML, line 469, column 9: Open quote is expected for attribute “id” associated with an element type “div”
this error comes due to this code: // Code for button
how to fix it !

similar website

Awesome! Its actually remarkable post, I have got much
clear idea about from this post.