How to Load Disqus Comments on Click with jQuery

By 2 years ago   BloggingTutorialsWordPress
Tweet Share Email Share  

How to load Disqus comment on click and on demand using jQuery? You might want to increase page speed or hide comments to save space to display other interactive elements to increase pageviews. You need to see if this works better for you than opening WordPress popup comments, or loading WordPress comments on new page. Disqus is a popular WordPress commenting system and you may like to install this is this way.

Load Disqus Comments on Click

If you use the power of jQuery, and add that to the Universal Disqus embed, you can achieve this is minutes.

load disqus comments

Remove Comments template – First you need to remove the default comments code from the single page template (single.php). Now Disqus will not automatically replace your WordPress comments.

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

Manually Add Disqus Comments –  Now you need to manually add the Disqus code to your WordPress theme template. You will need the Disqus universal embed code which can be added to any website anywhere in the HTML where you wish the comments to appear. Remember to edit it to your Disqus shortname to get started. The script looks like this and is officially provided by Disqus.

<script type="text/javascript">
var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname

(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

Now Comments PHP file – Add this code to a new PHP file which you can add to the theme template (Learn how to create php files in WordPress without FTP). Then add this universal code to this file … lets call it newcomments.php.

Load jQuery – Now load jquery to the footer of the template. Best to add the jquery CDN sources like those from Google for superfast load times.

<script src="//"></script>

Create Comments button – Now create a button which needs to be clicked to load comments. Here is the button code (beautifully made with font awesome and Bootstrap).

<div id="comment-button" class="btn btn-success" /><i class="fa fa-comments"></i> Comments</div>

Load Comments – Choose the site where you want to load comments. Add the code which will load comments when the click happens.

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

Load comments on Click – Now you need to add the Jquery magic to the button so that when the user clicks the button, the jquery will load the newcomments.php on this page. Here is the code, you can add after loading the jquery in the footer.

<script type="text/javascript" language="javascript">
$(document).ready(function() {

Remember to fix the path to where the file is called. That’s it.

Disqus WP Plugin – Now activate your Disqus WordPress plugin and it will provide integration with your Disqus comments – and  will load on demand and on clicking the button. Sometimes if you have thousands of comments, it is better to export WordPress comments as WXR files in batches and then import. Learn how to fix Disqus import errors. This will make your page load faster and load comments only when the user need to see them.

NOTE: This is NOT standard Disqus implementation. This is an experiment on our site for usable site design and testing in progress. Disqus always recommends you keep a database backup before activating and using their plugin (we use Vaultpress for this).

5 comments on “How to Load Disqus Comments on Click with jQuery

  1. This is what i was looking for just googling and got the best which was much needed thanks. Lets see i am going to apply it.

  2. raja says:

    now my research is finished after reading your post my whole problems are solved related to jquery.
    thanx for this post

  3. Serif says:

    Wooow !, thanks again !

  4. maaaz khan says:

    thanks mate for sharing this, I can utilize it better than visit me ;)

  5. Arafin Shaon says:

    wow! this is what i’v been looking for thanks :)

Leave a Reply

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

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.