How To Integrate Facebook Comments Box To Blogger

I’ve been getting questions about how to integrate Facebook Comments Box to Blogger just like what I have implemented in this site so that’s why I decided to come up with this article.

Facebook-Blogger

Commenting system is an integral part of any blog or website. It allows interactions between the site admin and site visitors. Some sites are using Third Party Commenting Systems instead of the default comment system in Blogger or WordPress or other platforms. It presents an opportunity to engage in productive conversations and relationships. As much as possible I wanted to present a simple comment system but the persistent concerns of comment spammers must be dealt with. In order to prevent Anonymous spammers, setting up your blog comment to Registered users is helpful but a good number of visitors may not have the required account.

I spent hours experimenting with different tutorials when I searched for this topic and each one is different and the outcome is not how I wanted it to be. What I wanted is to use a comment system that visitors, who are already logged in to their Facebook account, will be able to post comment immediately just like in Facebook, and also has the flexibility to use Blogger’s default commenting system, and I want to present it in tabs. In the end, I was able to come up with a commenting system that I wanted and so far is very satisfied with it.

In this tutorial, I will show you how to integrate Facebook Comments Box to Blogger. If you want to see first how this tab commenting system works, you can post comments below or check this previous article: What Do You Think About This Picture?

The steps here require modifying your blog template so make sure that you download first a backup of your current template. This is significant in case that there’s an error after template modification or if you don’t like the results, you need the saved backup template to restore your template. So here we go.

Adding the tabs:

Go to Edit HTML  and check Expand Widget Templates, using Ctrl+F search for the code class='comments' and just bellow this line paste the following code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>





This includes a 400px wide Facebook comments box, you may change the 400 to the width that suits your blog.


 


Tab scripting and styles:



Again using Ctrl+F, search for <head> tag in your template and paste the code below:



<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>





Change YOUR_FB_ID to your Facebook account ID to gain moderation privileges to the comments.



Using Ctrl+F this time search for #comments and paste the following code above it.





.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}





You may choose to alter the colors (in red) to suit your blog. Save your changes to the template and check each posts to see if you now have Facebook and Blogger comments with tabs to select your option. And that’s how to integrate Facebook Comments Box to Blogger.



Thanks again for taking time to visit InhoHiway.



If you enjoyed this article and wish to receive more great articles from me then don't forget to subscribe to my regular Email Updates to receive Latest Articles in your Mailbox.



Feel free to reuse this blog's contents under a Creative Commons Attribution Sharealike license unless otherwise noted.

Recommended Articles:

Tips And Tricks 4381848122610699142

Post a Comment

  1. Dami may gusto nito. Salamat po sir :)

    Herbert
    Filipino Blog

    ReplyDelete
  2. Thanks for checking InhoHiway Herbert!

    ReplyDelete
  3. would it be possible to add a tweetbox tab as well?

    ReplyDelete
  4. @Kench

    I have not explored about the tweetbox tab yet and if ever I can make it work I will surely write an article about it.

    ReplyDelete

Your feedback is highly appreciated. Unnecessary or irresponsible comments will be deleted immediately. Thank you.

emo-but-icon

Visitors

Recommend on Google

When signing up you will initially receive a confirmation email requiring your approval to complete the subscription.

Recent

Site Stats

Technology & Computers - Top Blogs Philippines
item