Load Disqus Comment When Visitors Want

Disqus is a popular comment management system for blog or website. But it take time to load and increase page load time of website. In this post I'm telling you how to load disqus comment only when visitor want to add or view comment. Initially display only button or link, labeled with  Add a comment or Post a comment, when someone click on that link/button then disqus comment will start to load.

Why ?

1. This will decrease the page load time, and speed up your website or blog.
2. Decrease the comment spamming.

Following code for loading disqus comment box when click on button.

<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
  <button class='disqusbutton' onclick='load_disqus()'>Add comment</button>
  <script>
    function load_disqus()
    {
      var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
      dsq.src = &quot;http://YOUR-DISQUS-SHORT-NAME.disqus.com/embed.js&quot;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
      var ldr = document.getElementById(&#39;disqus_loader&#39;);
      ldr.parentNode.removeChild(ldr);
    }
  </script>
</div>

YOUR-DISQUS-SHORT-NAME replace with your disqus short name.

Use CSS for customizing button style. 

.disqusbutton{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    text-transform:capitalize;
    background-color:#06C;
    color:#f9f9f9;
    text-outline:#000;
    font-weight:900;
    padding:7px;
    border-radius:8px;
    cursor:pointer;
}

Tag :

• Blogging
• Disqus

Share this Post :

• 
• 
• 

Digvijay Todkar

He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger & an addicted Web Developer.know more..

Older Post