Combine Disqus Comments with Onclick Events

This time what will be hidden are disqus comments, different from the trick in the article Adding Show and Hide Blogger Comments with the Onclick Event. The button that will appear will only bring up the disqus comment column, when the button is clicked the button will disappear automatically.

But the function is still the same, namely to speed up loading when loading pages (onload) of posts on the blog. Here's how to apply it

Loading Disqus Comments with Onclick Event

• 1. If the blog already has a Disqus widget and all the code related to Disqus, please delete it first. So that this tutorial can be applied properly.

• 2. In this tutorial there is a code that uses fontawesome. Make sure there is a fontawesome link inside the template.

1. Login to Blogger> Template Editor> Find the code below

<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>

2. Add the code below just below the code in step 1 above

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
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;;
</script>
</b:includable>

The result will be like this

<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
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;;
</script>
</b:includable>

3. Then add the code below before </body>

<script type='text/javascript'>
var disqus_shortname = &quot;YOU-ID-DISQUS&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="YOU-ID-DISQUS";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Replace the code "YOU-ID-DISQUS" with your disqus username.

4. Next add the code below before]]></ b:skin> or </style>

/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

5. Find the code below

<div class='comments' id='comments'>

6.Add the code below just above the code in step 5

<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

The result will be like this

<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>
<div class='comments' id='comments'>

7. To display the disqus comment count on the index and post pages, please add the code below to the post meta or post info according to the template used

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

8. Save the template.

This is the tutorial on how to load Disqus comments with the Onclick Event, hopefully this is useful.