December 2nd, 2017

How to Load Disqus Comments on Click

On searching Google, I got many articles on this but didn’t find any way to do if official Disqus comment system WordPress plugin is used. So, decided to write on it. This post explains how to setup Disqus on your website to load on-demand (on click on any button or link) and not automatically. It is assumed you’ve registered your website with Disqus before get started.

Why?

Here are some advantages of loading Disqus on click:

1. By default, Disqus comment system loads javascript in parallel to show the widget. so It affects the speed of page load. To load Disqus on click increases page load speed i.e. it takes lesser time to load.
2. Page length also decreases, it makes easier to scroll up and down.
3. Hide comments to save space especially when viewed on mobile devices. It makes the page much cleaner.
4. less spam comments

Website Integration

For normal website, you can use ‘Universal Embed Code‘ which loads and displays Disqus on your site, typically on the individual article or post pages. Here, it is customized code to load on click.

1. Add following where you want to display Disqus comments:

<div id="disqus_thread">
<a href="#" class="comments-holder" onclick="loadDisqus();return false;">Show/Post Comments</a> 
</div>

2. Add following javascript code before </body> after replacing disqus_shortname and disqus_config values:

<script>

    var disqus_shortname = "YOUR_DISQUS_USERNAME";
    var disqus_config = function () {
        this.page.url = 'http://mywebsite.com/webpage1';  
        this.page.identifier = 'http://mywebsite.com/webpage1';
    };
    var is_disqus_loaded = false;
    function loadDisqus() {  
      if (!is_disqus_loaded){
        is_disqus_loaded = true;
        var d = document, s = d.createElement('script');        
        s.src = '//' + disqus_shortname +'.disqus.com/embed.js';        
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      }
       
    };
</script>

3. On page “Show/Post Comments” link is displayed and on click, comments will be loaded.

load disqus on click

WordPress Integration

If you are using “Disqus comment system” plugin in WordPress and want to load Disqus comment on click then we have to implement in such way so that the existing comments must not be lost on new display. That is the main objective for this post.

1. If you are using “Disqus comment system” plugin, disable it.
2. Remove comments section of your website.
Generally, the following code is used to call the comment section:

<?php comments_template('', true); ?>

Either you can update the above code or update the comments template page (generally comments.php).

3. Use the same html code used in Website integration section:

<div id="disqus_thread">
<a href="#" class="comments-holder" onclick="loadDisqus();return false;">Show/Post Comments</a> 
</div>

4. We are going to use same javascript code. If you are migrating from “Disqus comment system” plugin, this.page.identifier must be same as it was earlier for existing comments. If you check browser view source of existing page which uses plugin, you will get identifier like below:

var disqus_identifier = '1495 http://techbrij.com/?p=1495';

To make same identifier, use following javascript code after replacing YOUR_DISQUS_USERNAME and disqus_config parameters:

<script>
    var disqus_shortname = "YOUR_DISQUS_USERNAME";
    var disqus_config = function () {
        this.page.url = '<?php echo get_permalink(); ?>';  
        this.page.identifier = '<?php echo $post->ID . ' ' . $post->guid; ?>';
    };
    var is_disqus_loaded = false;
    function loadDisqus() {  
      if (!is_disqus_loaded){
        is_disqus_loaded = true;
        var d = document, s = d.createElement('script');
        
         s.src = '//' + disqus_shortname +'.disqus.com/embed.js';   
        
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      }
       
    };
</script>

In wordpress single.php, generally $post is used for current post depends on theme. Update it according to your theme. Now you can test your site, click on “Show/Post Comments” to load comments.

Disadvantages

Here are the disadvantages of loading Disqus on click:

1. No one wants to do extra click for commenting, so less contribution in comments.
2. Not good in terms of comments crawling by search engines on website.
3. In my personal experience, I get drop in Alexa ranking.

Conclusion

In this post, we saw how to integrate Disqus into normal websites and WordPress without impacting the existing comments. If your website is not getting much comments or it is not so important then It is very useful to load it on demand.

Happy Blogging !!