{"id":41695,"date":"2014-08-11T10:21:55","date_gmt":"2014-08-11T04:51:55","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=41695"},"modified":"2026-10-07T20:33:55","modified_gmt":"2026-10-07T15:03:55","slug":"load-disqus-comments-on-click-demand","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/","title":{"rendered":"How to Load Disqus Comments on Click (No jQuery Needed)"},"content":{"rendered":"<p>Want to <strong>load Disqus comments on click<\/strong> 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&#8217;t need jQuery at all &#8211; a few lines of plain JavaScript do the job better.<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-41700 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/load-disqus.png\" alt=\"load disqus comments on click button\" width=\"442\" height=\"390\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/load-disqus.png 442w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/load-disqus-150x132.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/load-disqus-300x264.png 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/p>\n<div class=\"quick-answer\" style=\"border-left: 4px solid #F28C1E; background: #f6f8fb; padding: 14px 18px; margin: 18px 0;\"><strong>Quick answer:<\/strong> Replace the normal Disqus embed with an empty <code>&lt;div id=\"disqus_thread\"&gt;<\/code> and a &#8220;Show comments&#8221; button. When the button is clicked, set <code>disqus_config<\/code> and inject <code>https:\/\/YOUR-SHORTNAME.disqus.com\/embed.js<\/code>. Optionally use an IntersectionObserver so comments also load automatically when the reader scrolls near them.<\/div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af59fad1a5dd\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af59fad1a5dd\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Why_load_Disqus_comments_on_demand\" >Why load Disqus comments on demand?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#How_to_load_Disqus_comments_on_click_step_by_step\" >How to load Disqus comments on click (step by step)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#1_Find_your_Disqus_shortname\" >1. Find your Disqus shortname<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#2_Stop_the_automatic_embed\" >2. Stop the automatic embed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#3_Add_the_placeholder_and_button\" >3. Add the placeholder and button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#4_Add_the_on-click_loader_script\" >4. Add the on-click loader script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#5_Optional_Load_Disqus_on_scroll_instead\" >5. (Optional) Load Disqus on scroll instead<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#6_Style_the_button\" >6. Style the button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#7_Test_it\" >7. Test it<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#The_old_jQuery_method\" >The old jQuery method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Things_to_watch_out_for\" >Things to watch out for<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Does_loading_Disqus_on_click_improve_page_speed\" >Does loading Disqus on click improve page speed?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Do_I_still_need_jQuery_to_load_Disqus_comments_on_click\" >Do I still need jQuery to load Disqus comments on click?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Will_my_existing_Disqus_comments_still_show\" >Will my existing Disqus comments still show?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/08\/load-disqus-comments-on-click-demand\/#Can_I_load_Disqus_automatically_when_readers_scroll_down\" >Can I load Disqus automatically when readers scroll down?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_load_Disqus_comments_on_demand\"><\/span>Why load Disqus comments on demand?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Faster pages:<\/strong> the Disqus embed loads many extra scripts and network requests. Deferring them improves Largest Contentful Paint and Total Blocking Time.<\/li>\n<li><strong>Fewer third-party requests:<\/strong> readers who never open the comments never download Disqus scripts or its ad and tracking code.<\/li>\n<li><strong>Cleaner layout:<\/strong> a short button takes less space than a long comment thread, so related posts and other content stay visible.<\/li>\n<\/ul>\n<p>Before you choose this method, compare it with other options such as <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/\">WordPress popup comments<\/a> or showing <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/wordpress-comments-on-new-page\/\">WordPress comments on a new page<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_load_Disqus_comments_on_click_step_by_step\"><\/span>How to load Disqus comments on click (step by step)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Find_your_Disqus_shortname\"><\/span>1. Find your Disqus shortname<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Log in to <a href=\"https:\/\/disqus.com\/\" target=\"_blank\" rel=\"noopener\">Disqus<\/a>, open your site&#8217;s admin and go to <em>Settings &gt; General<\/em>. Your shortname is listed there. You will need it in the script below. Disqus documents the standard embed on its <a href=\"https:\/\/help.disqus.com\/en\/articles\/1717112-universal-embed-code\" target=\"_blank\" rel=\"noopener\">Universal Embed Code<\/a> help page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Stop_the_automatic_embed\"><\/span>2. Stop the automatic embed<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you use the official Disqus WordPress plugin, it replaces your theme&#8217;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&#8217;s comment template and remove the plugin output. If you embed Disqus manually, remove the old <code>embed.js<\/code> script that runs on page load.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Add_the_placeholder_and_button\"><\/span>3. Add the placeholder and button<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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):<\/p>\n<pre><code>&lt;button id=\"show-comments\" class=\"show-comments\"&gt;Show comments&lt;\/button&gt;\r\n&lt;div id=\"disqus_thread\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"4_Add_the_on-click_loader_script\"><\/span>4. Add the on-click loader script<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add this script just before <code>&lt;\/body&gt;<\/code>. Replace <code>YOUR-SHORTNAME<\/code> with your Disqus shortname. In WordPress, use <code>get_permalink()<\/code> and the post ID for the URL and identifier so existing comment threads still match.<\/p>\n<pre><code>&lt;script&gt;\r\n(function () {\r\n  var loaded = false;\r\n  var btn = document.getElementById('show-comments');\r\n  function loadDisqus() {\r\n    if (loaded) return;\r\n    loaded = true;\r\n    window.disqus_config = function () {\r\n      this.page.url = 'https:\/\/example.com\/your-post\/';   \/\/ canonical URL\r\n      this.page.identifier = 'your-post-id';               \/\/ unique ID\r\n    };\r\n    var s = document.createElement('script');\r\n    s.src = 'https:\/\/YOUR-SHORTNAME.disqus.com\/embed.js';\r\n    s.setAttribute('data-timestamp', +new Date());\r\n    s.async = true;\r\n    document.body.appendChild(s);\r\n    if (btn) btn.remove();\r\n  }\r\n  if (btn) btn.addEventListener('click', loadDisqus);\r\n  \/\/ Also open comments when someone arrives via a #comment link\r\n  if (\/#(disqus_thread|comment)\/.test(location.hash)) loadDisqus();\r\n})();\r\n&lt;\/script&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"5_Optional_Load_Disqus_on_scroll_instead\"><\/span>5. (Optional) Load Disqus on scroll instead<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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:<\/p>\n<pre><code>if ('IntersectionObserver' in window) {\r\n  var box = document.getElementById('disqus_thread');\r\n  var io = new IntersectionObserver(function (entries) {\r\n    if (entries[0].isIntersecting) { loadDisqus(); io.disconnect(); }\r\n  }, { rootMargin: '400px' });\r\n  io.observe(box);\r\n}<\/code><\/pre>\n<p>The <code>rootMargin<\/code> starts loading 400px before the comments come into view, so readers rarely see an empty box.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Style_the_button\"><\/span>6. Style the button<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Give the button some padding and your brand colour so readers notice it. Many sites show the comment count on the button (&#8220;Show 24 comments&#8221;) using the Disqus <a href=\"https:\/\/help.disqus.com\/en\/articles\/1717274-adding-comment-count-links-to-your-home-page\" target=\"_blank\" rel=\"noopener\">comment count<\/a> script, which is much lighter than the full embed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Test_it\"><\/span>7. Test it<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Open a post and confirm no <code>disqus.com<\/code> requests appear in the browser&#8217;s Network tab before you click.<\/li>\n<li>Click the button and check that the correct thread with existing comments loads.<\/li>\n<li>Run the page through <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a> before and after to see the difference.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"The_old_jQuery_method\"><\/span>The old jQuery method<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Our original 2014 version used jQuery&#8217;s <code>$.ajax<\/code> with <code>dataType: 'script'<\/code> to fetch <code>embed.js<\/code> when a button was clicked. It still works if your theme already loads jQuery, but adding jQuery only for this is wasteful &#8211; the plain JavaScript version above is smaller and faster. Also note that Disqus now requires HTTPS URLs for the embed script.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Things_to_watch_out_for\"><\/span>Things to watch out for<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>SEO:<\/strong> Disqus comments load in an iframe, so search engines generally don&#8217;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.<\/li>\n<li><strong>Identifiers:<\/strong> always pass the same <code>page.url<\/code> and <code>page.identifier<\/code> the old embed used, or old comments may not appear.<\/li>\n<li><strong>Caching plugins:<\/strong> if you use a cache or optimisation plugin that delays JavaScript, exclude this small script or make sure it still runs.<\/li>\n<li><strong>Privacy:<\/strong> loading Disqus only on request also means fewer third-party cookies for visitors who never open the comments.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_loading_Disqus_on_click_improve_page_speed\"><\/span>Does loading Disqus on click improve page speed?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_I_still_need_jQuery_to_load_Disqus_comments_on_click\"><\/span>Do I still need jQuery to load Disqus comments on click?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Will_my_existing_Disqus_comments_still_show\"><\/span>Will my existing Disqus comments still show?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, as long as the page URL and identifier in <code>disqus_config<\/code> match what Disqus used before. Comments are stored on Disqus, not in your WordPress database.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Can_I_load_Disqus_automatically_when_readers_scroll_down\"><\/span>Can I load Disqus automatically when readers scroll down?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Use an IntersectionObserver on the <code>#disqus_thread<\/code> container to call the loader when it comes near the viewport.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to load Disqus comments on click instead of on every page view? Disqus is a popular third-party commenting system,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":41700,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-41695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=41695"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41695\/revisions"}],"predecessor-version":[{"id":63561,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41695\/revisions\/63561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/41700"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=41695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=41695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=41695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}