WordPress : Lazy Load Disqus Comments on Button Click

Share some love, will you?

 

Over the last few days, I have made some changes on the site to improve its speed. One of such changes was replacing the native WordPress comment system with Disqus. I changed the comment system because I thought of doing something like what Amit Agarwal has done on Labnol - make comments appear only when the visitors click on a button. This will reduce a lot of HTTP requests and in turn, help to improve site speed. I googled and then came across a post that did exactly what I was looking for!

NOTE : I have noticed that doing this will create a problem with Comment Sync, meaning, if you ever choose to leave Disqus and switch to the native WordPress comment system, all the comments might not be imported to the native WP comment system.

What we are trying to accomplish here is to load comments only when a button at the end of the page is clicked. If a visitor is really interested to leave a comment, he will do so by clicking a button. This guide is meant for WordPress, although  the same code can be used on other platforms as well.

On WordPress, go to Plugins > Editor. Select Disqus Comment System. On the right pane, click on disqus-comment-system/comments.php. (Make a backup of the file  by copying all the texts there to a text editor.) Now, replace all the texts with the one below :

<div id="comments" class="comments-area">

<div class="showDisqus">
<center><input type="submit" value="Load All Comments and Add Yours." /></center>
</div>

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

<script type="text/javascript">
 $j=jQuery.noConflict();
 $j(document).ready(function() {
 $j('.showDisqus').on('click', function(){   // click event of the show comments button
 var disqus_shortname = 'thelacunablog';  // Enter your disqus short
 // 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
 });
 });
</script>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Source : http://www.paulund.co.uk/ajax-disqus-comment-system

On the above code, replace "thelacunablog" with the shortname of your website. You can find it by going to Disqus Settings > General, under Site Identity. Now, save the file.

Open up any post and you should see a button that says "Load all comments and add yours". Visitors will now need to click on the button to view/add comments.

Bonus tip : Disqus by default does not show pingbacks. You might also want to force Disqus to display them.

3 Comments

  • Hi Subigya

    Glad you found this solution useful and that you found this solution the best way of dealing with this problem.

    I've also found that it is massively reduced the amount of spam comments because it takes some form of interaction for the comment form to appear.

    Though it is true that it takes away syncing Disqus comments with WordPress comments if you want to go back to WordPress comments you can simply re-sync the comments again. If you still want a link to comments in the admin area, you can easily add a new menu item http://www.paulund.co.uk/add-menu-item-to-wordpress-admin.

    Thanks
    Paul

  • it worked thank you .

  • After added this code to comments.php, I can see "Load all comments and add yours" but if I click on it, nothing happen. Why is that? One thing, your blog layout not properly display your posts.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>