The development of online reaction and commenting system
has come a long way path, from the academies
guestbooks to forums and and fillup feedback form, and from this time native
platform-dependent commenting systems to 3rd party commenting systems that work
cross-platform nevertheless(regardless) of what programming language or scripts
use your website or blog is based on.
These 3rd party commenting systems do more than just allowing visitors and readers to drop comments , rate and social share . Most of them support inclusive comment handling backend, spam control, blacklist/ whitelist management, integration with social media, theme customization and much more.
Most popular Commenting Sytem :
Today, I’m going to discuss about "How to add disqus commenting system and Loading... disqus add comment Button for Blogger" . Disqus comment system most popular system then most of people use this but this comment system take load more time to show and affected to loading page time. So today I'm discuss on this post , how disqus load only when visitor or user want add and view comment by given buttons and hide and show disqus comment thread.
How to add this comment System
>>Add this code on post body footer (also customise what do you want to place this code)
<b:if cond='data:blog.pageType == "item"'>
<div align='center'> <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('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://YOUR-DISQUS-SHORT-NAME.disqus.com/embed.js"; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); var ldr = document.getElementById('disqus_loader'); ldr.parentNode.removeChild(ldr); } </script>
<script type='text/javascript'>
function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
</script> </div>
<button class="disqusbutton" href='#' onclick='toggle_visibility('disqus_thread');'>Hide show comments</button>
</div>
</b:if>
>>YOUR-DISQUS-SHORT-NAME replace with your disqus short name.
>> If you customizing your css button style to use any of these codes :
First Code :
.disqusbutton{ border: 1px solid #999999; box-shadow: inset 0 0 1px 1px #f6f6f6; -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6; -moz-box-shadow: inset 0 0 1px 1px #f6f6f6; -o-box-shadow: inset 0 0 1px 1px #f6f6f6; background-color: #E0E0E0; color: #333333; margin-bottom: 40px; padding: 10px 15px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 16px; text-align: center; position: relative; display: inline-table; cursor: pointer; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease;}
.disqusbutton{ border: 1px solid #38538c; background-color: #4162a8; color: #FFFFFF; -webkit-text-shadow: 0px -1px 1px #213052; text-shadow: 0px -1px 1px #213052; -webkit-text-shadow: 0px -1px 1px #213052; -moz-text-shadow: 0px -1px 1px #213052; box-shadow: inset 0 1px 10px 1px #5D88E3, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7); -webkit-box-shadow: inset 0 1px 10px 1px #5D88E3, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7); -moz-box-shadow: inset 0 1px 10px 1px #5D88E3, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7);}.disqusbutton:hover{ box-shadow: inset 0 0px 20px 1px #88ADFC, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7); -webkit-box-shadow: inset 0 0px 20px 1px #88ADFC, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7); -moz-box-shadow: inset 0 0px 20px 1px #88ADFC, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7);}.disqusbutton:active{ box-shadow: inset 0 1px 10px 1px #5B89EB, 0 1px 0 #1A2847, 0 2px 0 #1C2D4D, 0px 3px 6px rgba(0,0,0,.9); -webkit-box-shadow: inset 0 1px 10px 1px #5B89EB, 0 1px 0 #1A2847, 0 2px 0 #1C2D4D, 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: inset 0 1px 10px 1px #5B89EB, 0 1px 0 #1A2847, 0 2px 0 #1C2D4D, 0px 3px 6px rgba(0,0,0,.9); margin-top: 10px;}
Second Code :
.disqusbutton{ border: 1px solid #999999; box-shadow: inset 0 0 1px 1px #f6f6f6; -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6; -moz-box-shadow: inset 0 0 1px 1px #f6f6f6; -o-box-shadow: inset 0 0 1px 1px #f6f6f6; background-color: #E0E0E0; color: #333333; margin-bottom: 40px; padding: 10px 15px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 16px; text-align: center; position: relative; display: inline-table; cursor: pointer; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease;}
.disqusbutton:hover{ background-color: #CCCCCC; color: #404040;}.disqusbutton:active{ background-color: #999999; color: #000000;}
Third Code :
.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;}
How to Use Loading.. Disqus Comment Button
In this given above figure show , how to use these buttons.
Why to Use this ?
- This will decrease the page load time, and speed up your website or blog.
- Decrease the comment spamming.
- Disqus official website | Sign up
- Disqus features
- Disqus blog
- Disqus premium
- Disqus demo
- Disqus for users
- Disqus for developers
Conclusion
I'm share this code to use feel free to use this. This comment system to improve to your site seo and decrease spammers. I hope to visitor use this code and share your experience and valuable comments.
Attention : Anyone can share this widget on his blog until or unless he gives proved credits to Digitalhubinc.com and blogsfunda.com . It’s a warmhearted request from our Team.
