Blogger Comment and Facebook comment in your blog!

Hi there! did you recognize the comment box below my post?



That is the combination of two plugins (Blogger + FB)
which are totally awesome!

FYI, The comment box in the FB developer 
cannot combine like this okay!
Let me teach you how to make it.
The steps are very very easy and quiet handy! ^_^

Adding the Tabs

Let's begin by adding the Tabs HTML.

1. Open your template in Design -> Edit HTML and tick Expand Widget Templates.

2. click on Download Full Template and save a copy of your template. (for backup)

3. After backing up, search with Ctrl+F for class='comments'

4. Below class='comments' place the following code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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>

Creating Tab Pages

Now that your tabs are in place, the comments
must be segmented into 'pages' to be shown or
hidden as a user chooses.  
Just after the Tab code above insert this code,


<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<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 and
designates a page for blogger comments. You may change
the 400 to whatever width suits your blog.

Tab Scripting and Styles
open search with Ctrl+F and look for <head>
Below <head> paste the following script:

<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>


These scripts are required to make the tabs function.
If you already have another Facebook plug in or JQuery 
script included elsewhere, you may delete the first two lines

you must change the third line YOUR_FB_ID to your Facebook account ID.
In the third line too there's a word fb:admins . Change the word admins to your FB URL

Here are the steps to find your FB ID and URL [here]

All that's left now are the Styles to make things look nice. 
Again search with Ctrl+F this time for #comments
Paste the following styles next to the #comments :
.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 change these styles to suit your blog,
how to change it? find out yourself! 
but all 6 should be included in some form. 

Save your changes and visit an individual post page. 
Posts should now have Facebook and Blogger Comments.
These will not appear on the main page, only individual post pages.

Good Luck ^_^

copied and edited from J.S Blog Stop
more trick and tips from him [here] !

3 comments:

  1. Oh great! thank you for the great share can you do me a favour. Why not share the same post at MBT blog. You will be given full author credits and links to your blog plus you can interact directly with our 5000 subscribers who will love to ask you questions please let me.
    You just need to submit this post in a wordpad at my email ID:
    mustafa.stc@gmail.com

    To avoid duplicate content you will then need to delete this post once it is published at MBT. MBT at present is a PR 4 blog with 19K Alexa. I a sure you will receibe good traffic from our site. Let me know soon.
    I would have done that my self but I am busy with some other tasks at the moment. Waiting for your kind reply.

    ReplyDelete
  2. you will just need to change the starting paragraph and add some more words to your post. So that the new post may look a bit different when search engines index it.

    ReplyDelete
  3. When will you post again ? Been looking forward to this !

    ReplyDelete