✕
Share it

Contact me
iPhone / iPad

Tools

Hindi Proof Reader Top Tech Blogs in India QR Code Generator
Make Money Online Earn from Blogging More Tools MS-Excel MS-Word AdSense About Lalit Contact us
TechWelkin Site Logo

TechWelkin

Tips and Tutorials on Computers, Mobiles and Internet

Last updated: 22 September 2017

How to Load Disqus onClick Event

September 9, 2014 By Lalit Kumar 2 Comments

You can load Disqus on click of a button. Loading Disqus comments on demand using onclick event increases page load speed of your website. It can be done with jQuery or with simple JavaScript.

Disqus commenting system is a great service. It allows you to seamlessly and very easily integrate a full-featured comments section in your blog or website. It has eliminated the need of maintaining user comments on your own server. Disqus takes care of all the comments made on your website and keep them associated with appropriate pages. It loads comments from Disqus server in asynchronous fashion using AJAX.

But there is a problem! When a page on your website loads and demands associated comments from Disqus server, it has to make a lot of GET queries. All the comments, gravatars of commentators, support files etc, all this has to come all the way from Disqus server on to your page. As a result, the page load speed of your website decreases.

Wouldn’t it be great if you could load Disqus comments on demand? For example, it would be excellent to load comments when a user clicks on a button. If user does not want to read or post comments, then there is no need to unnecessarily fetch comments from Disqus. Such on demand load of Disqus comments can be achieved by exploiting onClick event, asynchronous loading of Disqus JavaScript and/or AJAX. Let’s see how to do this.

Er… wait a second… do you first want to see the demo? Well, then just scroll down this page and see for yourself. At the time of writing this article, I am also using this method of loading Disqus comments on click event.

OK, now let’s see how to do this.

Remove comments Section of your website

First of all, you should do basic integration of Disqus Commenting System in your website or blog. If you’re using WordPress platform, you can easily do this integration using a plugin provided by Disqus. Otherwise also it is just a matter of including a JavaScript code provided by Disqus.

Needless to say, if you’re integrating Disqus, you should remove comments section, in case it is provided by your CMS or blog platform.

Load Disqus on click without using jQuery

This is the plain method that relies on basic JavaScript. If your website is not using jQuery (I wonder why!), you can use this simple method. Here is the code:

HTML

<div id="disqus_thread"></div>
<div id="disqus-comments">
<button onclick="load-disqus()">Read Comments</button>
</div>

JavaScript

function load-disqus() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
var load-button = document.getElementById('disqus-comments');
load-button.parentNode.removeChild(load-button);
}

Please note the following:

  1. You must not change the id=”disqus_thread” as it is used by the commenting system for certain operations.
  2. Replace [YOUR-DISQUS-SHORTNAME] with you own Disqus shortcode (you get it when you add a website into your Disqus account).
Load Disqus on click using jQuery

As most of the blogging platforms and other websites do load jQuery, you may want to take advantage of this excellent JavaScript package. Here is the code for loading Disqus on demand using jQuery and AJAX.

HTML

<div id="disqus_thread"></div>
<div id="disqus-comments">
<button onclick="load-disqus()">Read Comments</button>
</div>

JavaScript

$(document).ready(function() {
$('#loadDisqusBtn').on('click', function(){
var disqus_shortname = 'YOUR-DISQUS-SHORTNAME';
		$.ajax({
	         type: "GET",
	         url: "http://" + disqus_shortname + ".disqus.com/embed.js",
	         dataType: "script",
	         cache: true
	     });
	        $(this).fadeOut();
	});
});

In this code also, please don’t forget to replace [YOUR-DISQUS-SHORTNAME] with your own shortcode. This script uses AJAX to get Disqus JavaScript from server. Once the click event is triggered, the event causing button disappears. I am using this method to load comments on demand.

Using a Plugin

Those who are not code-savvy people, they can make use of a WordPress plugin to load comments on click of a button. This method is not recommended because installing too many plugins also slow down your website. So, you try to avoid installing plugins whose work you can easily do on your own by tweaking code a bit.

Advantages of loading Disqus on click

There are several advantages of using either of the given method. Let me explain:

  • Page load speed of your webpage increases. It takes lesser time to load and therefore, your website gains brownie points both from visitors and search engines.
  • Your page looks much cleaner without the clutter of comments section.
  • Total length of the page also decreases, which makes it easier for the visitor to scroll up and down the content.
  • It will reduce comment spam. You’ll get no spam at all. If you use WordPress default comment section without captcha and/or Akismet plugin —you’re likely to get loads of spam comments. Using on demand Disqus, will leave no scope for spammer as there will not be a form available for them to fill. Comment form appears only when person clicks on the button.
Disadvantages of loading Disqus on click

There is only one disadvantage that I can think of. It’s a matter visitor psychology “out of sight, out of mind”. If a visitors sees comments right served up to him, he may be more likely to read them. Contribution in comments section is also more likely if comments section is seen by default.

But if your content is so good that visitors will not bother to make an extra click for commenting, you should use this method.

Related Articles for More Information:

  1. Change onclick Event of an Element Using JavaScript
  2. Benefits of Loading jQuery from Google
  3. Create Floating Bar Like Gmail and Facebook
  4. Slow AddThis: Reason and Solution
  5. Javascript: onClick Open Link in New Tab (HTML Button)
  6. HTML: Give Different CSS Styles to Alternate List Items (OL, UL, LI)
Last updated: 22 September 2017 | Published on: 9 September 2014 | Authored and Edited by: Lalit Kumar and Team | Filed as: Home » Programming » Web development » JavaScript » How to Load Disqus onClick Event

Filed Under: JavaScript

Lalit Kumar is the Principal Author and Founder of TechWelkin. He is a web explorer and he enjoys finding useful information on the Internet. He loves to put things together to create a bigger solution. Lalit is passionate about technology, languages and literature. You can contact Lalit via email (techwelkin [at] gmail [dot] com) or Facebook (facebook.com/techwelkin).

Comments

  1. Clara Putri says

    September 25, 2015 at 3:01 pm

    Hello, how to copy above code? I can’t selection code in it

    Reply
    • Lalit Kumar says

      September 28, 2015 at 4:55 am

      Hi Clara, for an experiment I have disabled the selection of text on TechWelkin. You’ll have to type the code manually. I apologize for the inconvenience.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Stories

  • Check Ticket Confirmation PNR Status on WhatsApp
  • Easily Capture Screen and Do Recording on iPhone / iPad
  • Consistent Video Upload is Important for YouTube Channel
  • Conditions for YouTube Channel Monetization
  • How to Get Your First 100 and 1000 Subscribers on YouTube
  • What is the Average Audience Retention for YouTube Channels?
  • Remove Activate Windows Watermark from Windows 10
  • Disadvantages of Using Google Custom Search Engine

Tools

  • Hindi Proof Reader
  • Top Tech Blogs in India
  • QR Code Generator
  • Random Word Generator
  • Strong Password Generator
  • Trace Mobile Numbers

Connect with us

  • Facebook
  • Google+
  • Twitter
  • LinkedIn
  • Pinterest
  • RSS Feed

© 2007-2019 TechWelkin.
The content is copyrighted to Lalit Kumar and may not be reproduced on other websites.
TechWelkin displays Google AdSense ads. See how Google uses data when you're on TechWelkin | Privacy Policy