Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

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

Related Posts

  • How to Find CodeCanyon ThemeForest Purchase Code
  • JavaScript to Load Disqus on Scroll
  • Custom CSS Media Queries for IOS Devices
  • Highlight Current Menu Item Using jQuery
  • How to Style External Links With CSS
  • Boilerplate CSS Media Queries for Responsive Website
  • How to Add HTML 5 Support to Thesis Theme
  • Add Click to Call Phone Number Link With HTML5
  • No Self Pings : 2 ways to Remove WordPress Self Pingbacks

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial