Its debatable topic which commenting system is useful for blogger while there is many platform like Disqus, Facebook, Livefyre and so on, As we use all we found that all commenting system have there own benefits so we think and now here to share all of you how to add disqus, facebook and blogger comments system together. Yes its possible to add multiple commenting system with blogger's default commenting system.
Detail
Note: If you find any trouble regarding appearance of 3 comment box change the comment setting, Go to Setting > Post and Comment > In field of comment location select option "Embedded or Full Page" and check it respectively.
In this widget we used "onclick" events to disqus comment, it means disqus comment will load only when visitors click on disqus button. So it will not take unnecessary loading time. By adding Multiple comment system widget in blogger blog , Visitors have more options to share their thoughts, view, suggestions or query due to multiple logins facilities available to them.
 |
- How to Add Disqus Comments System to Blogger
- How to Add Facebook Comments to Blogger Blogs
- First of all must have FB page app id and Disqus account.
- Login to your blogger blog and backup-ed your blogger template.
- After getting backup go to Blogger Dashboard > Template > Edit HTML
- Press CTRL+F to found below head tag.
</head>
- Just above/before </head> tag paste below code.
<meta content='itsatblogger' property='fb:admins'/>
<meta content='3840756250xxxxx' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://tipsviablogging.github.io/tvbcommentstyle.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
- Note: Replace itsatblogger with with your own personal facebook username.
- replce 3840756250xxxxx with your own facebook App Id.
- Now search below code, Maybe you found it 2 or 3 times.
<div class='comments' id='comments'>
- Paste below code after every above code (<div class='comments' id='comments'>) you found.
<b:if cond='data:blog.pageType != "static_page"'>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/>
Comments
</div>
<div class='comments-tab disqusbutton' id='disqus-comments' onclick='load_disqus()' title='Comments with Disqus'>
<a alt='submit' class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + "#disqus_thread"' style='text-decoration: none; color: #ffffff'/>
Disqus
</div>
<div class='comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/>
Fb Comments
</div>
<div id='get-this' style='float: Right' title='Get This Comments Plugins'>
<a href='http://www.itsatblogger.com/2015/11/how-to-add-disqus-facebook-and-blogger.html
' style='text-decoration: none;' target='_blank'>
<span style='color: #999999;'>
[Get It]
</span>
</a>
</div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='disqus-comments-page'>
<div id='disqus_thread'/>
<b:if cond='data:blog.pageType == "item"'>
<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
<script>
function load_disqus() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://nusratcollection.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>
</div>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments-count expr:href='data:post.url'/>
<b>
Comments :
</b>
<br/>
<br/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Now search for body tag.
</body>
Detail
- Paste following code just above/before </body> tag.
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'Disqus-Site-Name'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
- Replace red colored Disqus-site-name with your own Disqus site username.
- Save your template.
Note: If you find any trouble regarding appearance of 3 comment box change the comment setting, Go to Setting > Post and Comment > In field of comment location select option "Embedded or Full Page" and check it respectively.
In this widget we used "onclick" events to disqus comment, it means disqus comment will load only when visitors click on disqus button. So it will not take unnecessary loading time. By adding Multiple comment system widget in blogger blog , Visitors have more options to share their thoughts, view, suggestions or query due to multiple logins facilities available to them.
Post a Comment