DISQUS COMMENTS: ONCLICK DISQUS COMMENTS ON BLOGGER WIDGET

Blogger Disqus Onlick

Disqus Comments with onClick event is tutorial about how to change Disqus comments form for Blogger's users with on click feature. This blogger's tips can can make pages loading faster because only loads the comments when visitors clicked on show & hide button. In this tutorial there is a code that using Font Awesome. Make sure the template already have Font Awesome installed.

DISQUS COMMENTS: SHOW & HIDE WITH ONCLICK EVENT

If the template already have there Disqus widgets, in order for this tutorial can be applied properly. please remove Disqus widgets and all the code relating to Disqus first.

  1. Login to your Blogger.
  2. Go to Template Editor.
  3. Then follows the tutorial steps by steps.


JAVASCRIPT: ONCLICK DISQUS COMMENTS


#1. FOR BLOGGER TEMPLATES WITHOUT DISQUS WIDGET INSTALLED BEFORE.

If your template does not have Disqus script on the template, do not continue this tutorial, but reads on: How to modifications Disqus widget on blogspot with on-Click features.

#2. FOR BLOGGER TEMPLATES WITH DISQUS WIDGET ALREADY INSTALLED

Skip this step if you already using number #1. If you have Disqus already installed on your template, simply find this (CTRL+F: Disqus for) :
<b:widget id='HTMLXXX' locked='false' title='Disqus for XXX' type='HTML'>
...
...
...
</b:if>
</b:includable>
</b:widget>

Then replace all that code to this:
<b:widget id='HTMLXXX' locked='true' title='Disqus for XXX' type='HTML'>
<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = &quot;YOUR_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="YOUR_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>
</b:includable>
</b:widget>

NOTE :

Change id='HTMLXXX' to your HTML's widget which is originally from before.
Change title='Disqus for XXX' to title='Disqus for Your Website Name' which is originally from before.
Change YOUR_DISQUS to your disqus username, there is two username of it.


And then find this similar with this script:
<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>

Add this code after the previous code. Remember do not replacing it :
<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>



HTML: CALLED DISQUS FUNCTION

Then find this (CTRL+F):
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
And add this code before that:
<div id='disqusshow' onclick='load_Comments()'>LOAD COMMENTS</div>
<div id='disqus_thread'/>



CSS: ONCLICK DISQUS COMMENTS

Add this CSS code before </style> or ]]></b:skin> or at CSS stylesheet area. This is using origins style,
/* Disqus Comments */
#comments{display:none;}
.post-comment-link{visibility:hidden}
#disqus_thread{background:#fff;margin:10px 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;margin-bottom:-75px}
#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}

EDIT CUSTOM HEIGHT:

From the CSS tag #disqus_thread, you can delete margin-bottom:-75px.

For more styling reads also: Disqus Stylesheet for Disqus comments box with OnClick event.


OPTIONAL: DISQUS COMMENTS COUNTS

To show Disqus comment count in the index page and posting, please add the code below to post meta or post information in accordance your template.

Add this rel tag:
title='Comments Count'

And the result would be similar like this:
<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>






Rebates Bonus
Exclusive Rebate

Sign up today and be the first to get notified on new updates.


LOAD DISCUSSION

0 comments:

Post a Comment