Floating Facebook Like Button For Blogger Blogs

In this tutorial, I want to share with you, how to add floating Facebook like button to your Blogger blog, thereby making it easy for your blog visitors to "like" your post while scrolling through your blog. This no doubt, is one of the ways you can increase traffic to your blog.



A single click on the Like button will 'like' your blog post and if a user that clicked on it clicks on it again, it will 'unlike' the blog post. The "like" button will also display the number of "likes" - and this will also include the "likes" garnered when you promote the post with a Facebook ad.

Adding the floating Facebook like button to blogspot blog is easy.



All you have to do is to ensure you've added the Facebook JavaScript SDK to your blog. Thereafter, you will be required to add the floating Facebook like button's code to your blog's html.



If you've not added the Facebook JavaScript SDK to your blogger blog, read how to add it here.



Once you confirmed that the Facebook JavaScript SDK has been added to your blog's html, proceed with the steps below:

• Sign in to your Blogger dashboard.


• Go to Layout


• Click "Add A Gadget"


• In "Add A Gadget" window, select HTML/Javascript


• Copy the code highlighted below and paste it inside the HTML/Javascript box

<!-- floating facebook like button starts-->

<style>

#pageshare {position:fixed; bottom:20%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Share This With Your Friends">

<div class='sbutton' id='fb'>

<div class="fb-like"data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>

</div>

<div style="clear: both;font-size: 9px;text-align:center;"> Share</div>

</div>

<!-- floating facebook like button end -->



That's all.



You should now see a floating Facebook like button similar to this screenshot:

Kindly note that it will display as floating vertical buttons that will also include a Facebook share button which will allow users to add a personal message and customize who they share the blog post with.



If you would like it to include tweet button and Google plus1 button, kindly read how to add floating share bar to blogspot blogs.



I hope this works for you.

Share this post