Make Facebook Comment and Blog Comments Contiguous

Make comments on the blog but can Facebook make blogs look more nice and tidy, the visitors will be more on make it easy to interact with you via the comments box as you are sure there are some visitors who are logged into Facebook accounts, so they too will be easier to comment.

But if we add Facebook comments and Etap maintain Default blog comment box would make a blog is dynamic plasticity extends down too, now therefore I will give How to Make Facebook Comments Adjacent to Blog Comments.

Here is a screenshot of his

How would like to try the next comment.

1. Login to Blog

2. Draft - Edit HTML

3. To avoid errors, backup your template first with complete Download

4. Check the "Expand Widget Templates"

5. Find the code <div class='comments' id='comments'>

Usually there will be 2 code in your template

Copy the code below just below <div class='comments' id='comments'> to 2

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

Note : " 2 " The number of comments that will show up, "400" Width Facebook Comments

6. Then Find the code </ head>

Copy the following code right above </ head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='ID Facebook' 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>

Facebook ID: Replace with your Facebook ID is located on the back browser your Facebook profile URL, example is the Facebook ID http://www.facebook.com/Hansherly so change ID to Hansherly

7. Find the code / *Comment or # comments
Each template has a structure different code, so just look for code similar to the above code
Copy the following code in the code above was

.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;}

8. Save

Done, now you have a Facebook Comment Adjacent to Blog Comments

" Have Fun "