Blogger Ever

How to load and display Disqus comments on button click in Blogger?

Loading Disqus on a button click can be a good option to load comments in a new way. But Blogger users have some negative drawbacks too.
Load Disqus On Button Click
[Updated On October-6-2014]: The Blogger users will now not face any problem when the comments will be loaded in mobile.
Recently, I found that Disqus have a very heavy script that takes too much time to load every comment worth size means more the comments on page more the time it will take. So I recommend to use buttons instead.

How to make it?

Step 1

  • Go to Blogger > Template > Edit HTML
  • Find </head>
  • Paste the following code just above it
<script type='text/javascript'>
        //<![CDATA[
function load_Comments() {
    var hidediv = document.getElementById('disqusdiv');
    hidediv.style.display = 'none';
    var disqus_shortname = 'bloggerever';
    (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>
Replace bloggerever with your Disqus short-name.

Step 2 

Okay now, find  <b:includable id='comments' var='post'> and paste the following code below it.
<div id='disqusdiv' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>
This is the place where your comments and button will be displayed, if you want them to be on some different place you can do that.

Step 3

  • Now find  //]]></b:skin>
  • Paste the following code just above it
#disqusdiv{
display:block;
padding:15px 0;
text-align:center;
width:100%;
color:#fff;
font:400 15px 'pt sans',sans-serif;
text-transform:uppercase;
cursor:pointer;
margin:10px 0;
background:#DD4C39;
}
#comments{
display:none;  // To hide default comments
}

Step 4


  • Find <b:includable id='post' var='post'>
  • Paste the following code just below it 
 <script>var disqus_url = &quot;<data:post.canonicalUrl/>&quot;;</script>

Done. Save template and see the effect.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.