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.
1. 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); ?>
2. 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">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>3. Edit 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 … let us call it newcomments.php.
4. 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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5. Create Comments button
Now create a button that 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>
6. 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>
7. 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() {
$("#comment-button").click(function(event){
$('#disqus_thread').load('PATH_TO/loadcomments.php');
});
});
</script>Remember to fix the path to where the file is called. That’s it.
8. Activate 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 needs 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. Do at your own risk. Disqus always recommends you keep a database backup before activating and using their plugin (we use Vaultpress for this).