Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

How to Make an On-Click Button Load Disqus Comments on Blogger

How to Make an On-Click Button Load Disqus Comments on Blogger

- - Post a Comment


Disqus is one of the best alternatives if we want to override Blogger's default comments.

Besides having a cooler look, Disqus also has additional features that Blogger's default comments don't have. And if you have multiple blogs at once, Disqus is worth considering because it can be used to moderate comments from multiple blogs at once from just one place.

Unfortunately, installing Disqus on Blogspot has one important drawback, which is that it makes loading blogs slow. From my previous experiment, installing Disqus made my test pagesped results via GTMetrix blog drop drastically from 90% to 62%! Wow, even though my Disqus comment is still blank. Imagine how slow it would be if Disqus comments were already filled with dozens of comments.

Fortunately, there are ways to work around this, one of which is to install Disqus lazy load. With this technique, Disqus will only be loaded when needed. That is when the visitor has scrolled to the comment area.

Well, as an alternative way, you can also create an On-Click Load Disqus button so that Disqus comments only appear when we press certain buttons.

How to Install Disqus Comments with the Click Load Button

Before installing the on click load Disqus button, don't forget to backup your Blogger template first! If so, please follow the steps below.

1. Delete Other Disqus Codes

If you've installed other code like Disqus lazy load code, delete it first.

2. Replace Blogger Default Comment Column with Disqus

To do so, go to Blogger dashboard and open your Blogger template. After that look for the following code.

<b:includable id='comments' var='post'>
<kode komentar Blogger>
</b:includable>

If you have found it, delete the code and replace it with the Disqus code below.

Btw first replace it YOUR_DISQUS_SHORTNAMEwith your own Disqus shortname. Otherwise, the error “We are unable to load Disqus …” will appear .

<b:includable id='comments' var='post'>
<div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;YOUR_DISQUS_SHORTNAME&#39;; //Add your shortname here
var disqus_url = disqus_blogger_current_url;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;; }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
function disqus() {
  if (!disqus_loaded) {
      disqus_loaded = true;
      var e = document.createElement(&quot;script&quot;);
      e.type = &quot;text/javascript&quot;;
      e.async = true;
      e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
      (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
      .appendChild(e);
      //Hide the button after opening
      document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
  }
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
  if (hash.substring(0, 8) == &quot;comment-&quot;) {
      disqus();
  }}}
</script>
</div>
</b:includable>

3. Place the Click Load Disqus button at the end of the article

To place the on-click load Disqus comment button at the end of the article, search for the tag </article>and then enter this code just above the tag,

<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>

4. Beautify Disqus Comment Widget Appearance

As a final step, we can tidy up the appearance of the Disqus comments widget using CSS code. To do this, find the tag </style>and add the following CSS code

/* Tombol On-Click Load Disqus*/
#comments,.comment-form, .comment_reply_form .comment-form {display:none}
#comments-block {display:none;background:#fff;margin:20px auto;padding:0}
.comments-blocks button {display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:# 3371d6;border-radius:2px}
.comments-blocks button:hover {background:#02b62bc}

If so, save the changes to the theme.


So far, the process is complete. You can check the end of your article and see the Disqus button attached there.

When clicked, then Disqus comments appear. That way, our blog will not load Disqus before it is needed. loading blogs becomes faster with this one simple trick.

Post a Comment for "How to Make an On-Click Button Load Disqus Comments on Blogger"