How To Add Facebook Comment Box and Facebook Like + Send buttons To Blogger Blogs

It has been a long ago that Facebook has launched plugins for website and blogs to increas traffic and conversions.

Facebook comment box is one of the useful tool for bloggers to increase conversations.

In this post I will teach you on how to integrate Facebook comment box to blogger. Note not by inserting XFML to each post. But by inserting script to your blogger template in a simple way.

1. Log in to your blogger account.

2. Click on Design > Edit HTML > Expand Widget Templates by selecting the checkbox. Or download you full template (instructions can be found on the same page.)

3. Save a copy of your original template (if this is not successful you may able to restore your original template). Now create another copy of your template for editing and open it to your scripting editor (like dreamweaver, notepad, editplus, or any other).

4. Now search the code:
<b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

and replaced it with:

<!-- Facebook Like+Send button Start -->
<b:if cond='data:blog.pagetype != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<script src='http://connect.facebook.net/en_us/all.js#xfbml=1' type='text/javascript'></script><fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='true' width='550' colorscheme='light'></fb:like></div></b:if>
<!-- end of Facebook Like+Send button End -->


<!-- Facebook Comment Box -->
<b:if cond='data:blog.pagetype != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<script src='http://connect.facebook.net/en_us/all.js#xfbml=1' type='text/javascript'></script><fb:comments expr:href='data:post.url' font='Tahoma' num_post='10' width='450' colorscheme='light'></fb:comments>
</div>
</b:if>
<!-- end of Facebook Comment Box -->

PREVIEW:

5. Then paste your editted template to Blogger Template Section and Save it.


Cons:

• Need to register the Post URL to facebook.com/share and placed it within the post to enable Facebook Like + Send button and comment box to appear.
• No notifications receive when new comments has been posted.

Have you been successful integrating Facebook Comment Box and Facebook Like + Send button to blogger? Let us know your thoughts.