How to Load Disqus Comments on Click (No jQuery Needed)

Want to load Disqus comments on click instead of on every page view? Disqus is a popular third-party commenting system, but its embed pulls in a lot of JavaScript, fonts and tracking requests. Loading it only when a reader actually wants to see the comments makes your posts faster and keeps Core Web Vitals happy. When we first wrote this guide we used jQuery. In 2026 you don’t need jQuery at all – a few lines of plain JavaScript do the job better.

Why load Disqus comments on demand?

• Faster pages: the Disqus embed loads many extra scripts and network requests. Deferring them improves Largest Contentful Paint and Total Blocking Time.
• Fewer third-party requests: readers who never open the comments never download Disqus scripts or its ad and tracking code.
• Cleaner layout: a short button takes less space than a long comment thread, so related posts and other content stay visible.

Before you choose this method, compare it with other options such as WordPress popup comments or showing WordPress comments on a new page.

How to load Disqus comments on click (step by step)

1. Find your Disqus shortname

Log in to Disqus (external site), open your site’s admin and go to Settings > General. Your shortname is listed there. You will need it in the script below. Disqus documents the standard embed on its Universal Embed Code (external site) help page.

2. Stop the automatic embed

If you use the official Disqus WordPress plugin, it replaces your theme’s comment template and loads Disqus on every post. To control loading yourself, either deactivate the plugin and use the manual embed below, or use your theme’s comment template and remove the plugin output. If you embed Disqus manually, remove the old embed.js script that runs on page load.

3. Add the placeholder and button

Add this HTML where you want comments to appear, usually at the end of your single post template (or via a hook in a child theme):

<button id="show-comments" class="show-comments">Show comments</button>
<div id="disqus_thread"></div>

4. Add the on-click loader script

Add this script just before </body>. Replace YOUR-SHORTNAME with your Disqus shortname. In WordPress, use get_permalink() and the post ID for the URL and identifier so existing comment threads still match.

<script>
(function () {
  var loaded = false;
  var btn = document.getElementById('show-comments');
  function loadDisqus() {
    if (loaded) return;
    loaded = true;
    window.disqus_config = function () {
      this.page.url = 'https://example.com/your-post/';   // canonical URL
      this.page.identifier = 'your-post-id';               // unique ID
    };
    var s = document.createElement('script');
    s.src = 'https://YOUR-SHORTNAME.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    s.async = true;
    document.body.appendChild(s);
    if (btn) btn.remove();
  }
  if (btn) btn.addEventListener('click', loadDisqus);
  // Also open comments when someone arrives via a #comment link
  if (/#(disqus_thread|comment)/.test(location.hash)) loadDisqus();
})();
</script>

5. (Optional) Load Disqus on scroll instead

If you would rather not ask readers to click, load comments when they scroll close to the comment area. Add this inside the same script, after the click listener:

if ('IntersectionObserver' in window) {
  var box = document.getElementById('disqus_thread');
  var io = new IntersectionObserver(function (entries) {
    if (entries[0].isIntersecting) { loadDisqus(); io.disconnect(); }
  }, { rootMargin: '400px' });
  io.observe(box);
}

The rootMargin starts loading 400px before the comments come into view, so readers rarely see an empty box.

6. Style the button

Give the button some padding and your brand colour so readers notice it. Many sites show the comment count on the button (“Show 24 comments”) using the Disqus comment count (external site) script, which is much lighter than the full embed.

7. Test it

• Open a post and confirm no disqus.com requests appear in the browser’s Network tab before you click.
• Click the button and check that the correct thread with existing comments loads.
• Run the page through PageSpeed Insights (external site) before and after to see the difference.

The old jQuery method

Our original 2014 version used jQuery’s $.ajax with dataType: 'script' to fetch embed.js when a button was clicked. It still works if your theme already loads jQuery, but adding jQuery only for this is wasteful – the plain JavaScript version above is smaller and faster. Also note that Disqus now requires HTTPS URLs for the embed script.

Things to watch out for

• SEO: Disqus comments load in an iframe, so search engines generally don’t treat them as part of your page content either way. Loading them on click does not lose you SEO value that you had before.
• Identifiers: always pass the same page.url and page.identifier the old embed used, or old comments may not appear.
• Caching plugins: if you use a cache or optimisation plugin that delays JavaScript, exclude this small script or make sure it still runs.
• Privacy: loading Disqus only on request also means fewer third-party cookies for visitors who never open the comments.

FAQ

Does loading Disqus on click improve page speed?

Yes. The Disqus embed adds many scripts and requests. Deferring it until a click or scroll removes that weight from the initial page load, which usually improves PageSpeed scores.

Do I still need jQuery to load Disqus comments on click?

No. Modern browsers can create and append the script tag with plain JavaScript, as shown above. jQuery is only worth using if your site already depends on it.

Will my existing Disqus comments still show?

Yes, as long as the page URL and identifier in disqus_config match what Disqus used before. Comments are stored on Disqus, not in your WordPress database.

Can I load Disqus automatically when readers scroll down?

Yes. Use an IntersectionObserver on the #disqus_thread container to call the loader when it comes near the viewport.