Disqus is a popular commenting system widely used on websites and blogs for user engagement. However, loading Disqus comments by default can impact page speed. A smart solution is to load Disqus comments dynamically only when users click a button or link. This improves the initial page load time while still providing comments functionality.

Step 1: Prepare the HTML Structure

Start by creating a placeholder for the comments section and an anchor tag that users will click to load the Disqus comments.

<div class="comments-area" id="comments">
    <div id="disqus_thread" class="text-center">
        <a href="https://example.com/your-post-slug#disqus_thread" onclick="disqus();return false;">View comments</a>
    </div>
</div>

Explanation of the placeholder above:

  • disqus_thread is the container where Disqus will embed its comments.

  • The anchor tag will display the number of comment count that exist and trigger the loading process when we click it.

  • For post URLs, use variables provided by the CMS used. Please read your CMS documentation for more details. Example:

<a href="<?php echo $p->url;?>#disqus_thread" onclick="disqus();return false;">View comments</a>

Step 2: Add the Required Disqus Script

Disqus provides a unique embed script for your website. Make sure you've already registered your site on Disqus and obtained a shortname.

Here I will create two functions, one to load Disqus comments when we click the comments count link and the other to display the number of comments count itself.

Script to Load Disqus Comments

<script type="text/javascript">
var disqus_shortname = 'your-disqus-shortname';
var disqus_title = 'Your Post Title';
var disqus_url = 'https://example.com/your-post-slug';
var disqus_loaded = false;

// Load Disqus comments
function disqus() {
    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>

This script does the following:

  • Defines a function disqus that embeds the Disqus comment script dynamically.

  • Adds the Disqus embed script to the document head.

  • The disqus_shortname is your Disqus shortname. We can retrieve it from our CMS config, example: <?php echo config('disqus.shortname');?>

  • The disqus_title is your post title. Example: <?php echo $p->title;?>

  • The disqus_url is your post URL. Example: <?php echo $p->url;?>

Script to Display the Comment Count

<script type="text/javascript">
var disqus_shortname = 'your-disqus-shortname';

// Disqus comment count
(function () {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

This script does the following:

  • Replace the View comments with example Read comments (7)

  • For disqus_shortname we can write it manually or retrieve it from our CMS config, example: <?php echo config('disqus.shortname');?>

  • Adds the Disqus count script to the document head.

Disqus Comments Configuration

You can customize the text of the comment count link via Site Community Settings on Disqus website. Use {num} as the placeholder for the current comment count.

Example for my blog:

  • Zero comments: Write a comment
  • One comment: Read comment (1)
  • Multiple comments: Read comments ({num})