Load Disqus Comments On Click With AJAX

Load Disqus on Click with AJAX:

Disqus is a most powerful and widely used commenting system. By default it loads comments asynchronously on your website pages and posts. Some may not want to comment on post, then why to display and consume your bandwidth. Change default to load Disqus on click event base.When you consider to increase speed of your website, you should reduce http requests, so server loads your blog in the nominal time span.

if a large percentage of people will not comment on your blog,then avoid displaying comments.The fact is Disqus comments makes large amount of HTTP request.

Add the following HTML code to display Disqus comments on click event base,here we will use Click Button to show comments.

<div id="comments" class="comments-area">
	<div class="showDisqus">Show Comments</div>

        <div id="disqus_thread"></div>
</div>

As we already have the div disqus_thread, as soon as we load the Disqus Javascript it will search for this div and displays Disqus comments.Here is the jQuery to load comments with ajax call to show button before display Disqus comments.Make sure to change enter_your_disqus_user_name with your Disqus short name.

$j=jQuery.noConflict();

$j(document).ready(function() {
	$j('.showDisqus').on('click', function(){   // click event of the show comments button
		var disqus_shortname = 'enter_your_disqus_user_name';  // Enter your disqus user name

                // ajax request to load the disqus javascript
		$j.ajax({
	         type: "GET",
	         url: "http://" + disqus_shortname + ".disqus.com/embed.js",
	         dataType: "script",
	         cache: true
	     });

	        $j(this).fadeOut();  // remove the show comments button
	});
});

After implementing this technique,see the load time of your website by using any speed test tool like Google Page Speed or Pingdom tools.There is a big change in page load time.This method will make fewer HTTP requests