How To Add Floating Facebook Like Box To Blogger

Hello Bloggers, I just want to share this floating Facebook Like Box for your Blogger bloggerized by the John Francel Abaricia (Founder of Trickiezone). You can add it into your blogger site and let your readers like your Facebook page. It helps to increase the social signal for your blog site and brings more traffic using this widget.

Live Demo

How To Add Facebook Like Box To Blogger

1. Login to your Blogger account.
2. Go to your blog Layout section.
3. Click Add a Gadget.
4. Choose HTML/JavaScript.
5. Copy the code below.
6. Paste into HTML/JavaScript content area.
7. Save and view your blog.
8. Done!

Code:

<!– Floating Facebook Like Box by www.trickiezone.com –>
<div style=”display: block; position: fixed; top: 50px; right: 20px; background:white; border:1px solid #cbcbcb;”>
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like-box href=”http://www.facebook.com/modifier200″ width=”410″ show_faces=”true” border_color=”white” stream=”false” header=”true”></fb:like-box>
<div style=”text-align: right; border-top:1px solid #cbcbcb; background:#eeeff4″>
<span style=”font-size: xx-small;margin-right:5px;”><a href=”http://www.trickiezone.com/2013/03/how-to-add-floating-facebook-like-box.html” target=”_blank”>Facebook Like Box</a></span></div>
</div>
<!– Floating Facebook Like Box by www.trickiezone.com –>

If you want this widget appears only in your blog post follow the instructions below.

How To Add Facebook Like Box To Blogger Post Only

1. Login to your Blogger account.
2. Go to your blog Template section.
3. Backup your template.
4. After that click Edit HTML.
5. Tick Expand Widget Templates.
6. Press Ctrl+F and search the

<div class=’post-body entry-content’>

1. Copy the code below and paste after the

<div class=’post-body entry-content’>

1. Save the template and view your blog post.
2. Done!

Code:

<!– Floating Facebook Like Box by www.trickiezone.com –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=’display: block; position: fixed; top: 50px; right: 20px; background:white; border:1px solid #cbcbcb;’>
<div id=’fb-root’/><script src=’http://connect.facebook.net/en_US/all.js#xfbml=1′/><fb:like-box border_color=’white’ header=’true’ href=’http://www.facebook.com/modifier200′ show_faces=’true’ stream=’false’ width=’410′/>
<div style=’text-align: right; border-top:1px solid #cbcbcb; background:#eeeff4′>
<span style=’font-size: xx-small;margin-right:5px;’><a href=’http://www.trickiezone.com/2013/03/how-to-add-floating-facebook-like-box.html’ target=’_blank’>Facebook Like Box</a></span></div>
</div>
</b:if>
<!– Floating Facebook Like Box by www.trickiezone.com –>

Customization:

• display: block; position: fixed; top: 50px; right: 20px; = You can change the position of widget appears in your blog by increasing or decreasing the pixel.
• background:white; = You can change the background color of this widget.
• border:1px solid #cbcbcb; = You can change the color of border color (hex) of this widget.

Hope that this widget works to you, Say thanks by hitting Facebook share button or Google +1 button. Also, it would be nice if you do not remove the credit link as a sign of respect to the author. Thank You!

Confused? Feel free to ask by posting your comment below.