How to Load Disqus Comments on Demand?

Learn how to load Disqus on demand in Jekyll and Wordpress blogs.

• Wordpress
  • Add the code to functions.php
  • Place HTML code
• Jekyll
  • Create an html file
  • Place a button or link in your post layout
  • Add the scripts

Wordpress

Most WordPress sites use Disqus as their commenting system. The easiest way to implement Disqus on your website is to use their plugin .

Since Disqus loads asynchronously, your web page load speeds are not affected. However, Disqus downloads required files to the user’s system, which adds the weight of posts/pages where you have implemented Disqus codes. This costs your users their valuable bandwidth.

There are numerous other posts on the internet related to the topic. The one I liked the most is from Labnol. However, in his post, he didn’t mention how to dynamically get post URL, post ID, etc. We bring you a code snippet that you can place in your theme’s functions.php file.

Add the code to functions.php

Place the below code in your theme’s functions.php file or your site-specific plugin. Remember to change the short name from aneejian to your Disqus short name in the line - var disqus_shortname = "your disqus short name";

function disqus_embed() {
 global $post;
    echo '<script type="text/javascript">
    var disqus_shortname = "aneejian";
    var disqus_title = "'.$post->post_title.'";
    var disqus_url = "'.get_permalink($post->ID).'";
    var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
    var disqus_loaded = false;
    function loadDisqus() {
      if (!disqus_loaded)  {
        disqus_loaded = true;
        var e = document.createElement("script");
        e.type = "text/javascript";
        e.async = true;
        e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
        (document.getElementsByTagName("head")[0] ||
         document.getElementsByTagName("body")[0])
        .appendChild(e);
      }
    } 
    </script>';
}
add_action('wp_head', 'disqus_embed');

Place HTML code

Place the below code where you want Disqus to load. This will show a link Load Comments where you have placed the code. Clicking the link will load comments. You can place it in your theme’s comments.php file or single.php file or you can use a plugin that can insert codes to your post/pages.

<div id="disqus_thread">
  <a href="#" onclick="loadDisqus();return false;">Load Comments</a> 
</div>

Jekyll

At the time of authoring this article, Disqus is the most reliable user-friendly comment system for Jekyll blogs.

Even this blog that runs on Jekyll uses Disqus for comments.

For Jekyll, we can implement two types of on demand Disqus loading.

• Disqus loads on clicking a button.

• Disqus loads when user reaches the end of the page.

Let us begin

Create an html file

Create an html file named disqus.html in the _includes folder of your Jekyll blog.

Add the following code to the disqus.html file.

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

We can use this as a placeholder for disqus comments in the post layout. This is an optional step. You can either enter the above html directly to the post layout or use {% include disqus.html %} if you are creating the file in _includes folder.

Place a button or link in your post layout

Add a button or link to the post layout where user can click to load comments.

Give it an id load-comments.

<div class="text-center">
    <a class="btn btn-outline-primary btn-block" id="load-comments"
        href="#comments" role="button">Load Comments</a>
</div>

Add the scripts

Add the following script to your js file or create a new one and refer it in your default layout.

var disqus_loaded = false;
var disqus_enabled = document.getElementById("load-comments");
$("#load-comments").on("click", load_disqus);

window.onscroll = function (e) {
  scrollFunction();
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    if (disqus_enabled && disqus_loaded == false) {
      load_disqus();
    }
  }
};

function load_disqus() {
  if (disqus_loaded || !disqus_enabled) return;
  var disqus_shortname = "disqus-shortname";
  $.ajax({
    type: "GET",
    url: "https://" + disqus_shortname + ".disqus.com/embed.js",
    dataType: "script",
    cache: true,
  });
  disqus_loaded = true;
  $(".show-comments").fadeOut();
}

Remember to replace disqus-shortname in the code above with your Disqus short name.