I have mentioned about a piece of code in my attempt to reduce page load time, which allows readers to load Disqus whenever they want. Its not very clear and probably not very helpful if you dont know much about JavaScript or dont want to read the code, so here is a post specifically written for that functionality.

1   The Disqus Universal Code

The following code is copied from Disqus Universal Code page. In your existing Disqus code should more or less look the same.

<div id="disqus_thread"></div>
<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 = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

The keyword for looking is disqus_thread, you shall see a similar code block like above.

2   With jQuery

If you use jQuery in your page already, then its very easy:

<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
  <button onclick='$.ajaxSetup({cache:true});$.getScript("http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js");$.ajaxSetup({cache:false});$("#disqus_loader").remove();'>Load Disqus Comments</button>
</div>

You need to replace existing Disqus with above and make a couple changes:

  1. Replace [YOUR-DISQUS-SHORTNAME] with yours. You can see all available short names in Universal Code page. Short name is like an ID.
  2. You may want to change the button text Load Disqus Comments.

In the default layout, this new button is center-aligned. You may want to add CSS style for it. The cache for AJAX setup is to disable jQuery cachebuster, its important for speed since the embed.js wont change often.

3   Without jQuery

<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
  <button onclick="load_disqus()">Load Disqus Comments</button>
  <script>
    function load_disqus()
    {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      var ldr = document.getElementById('disqus_loader');
      ldr.parentNode.removeChild(ldr);
    }
  </script>
</div>

Please follow the same instructions as described in With jQuery.

4   Note

I do not test either method, they are written on the fly, although this blog is using slightly different With jQuery code. If you see errors, please post the error message in comments.