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