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.

add floating facebook like button to blogger blog

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-->
#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 
#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;}
<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 style="clear: both;font-size: 9px;text-align:center;"> Share</div>
<!-- floating facebook like button end -->

That's all.

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

floating facebook like button for blogger blog

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.


  1. Didn't work for me o
    Displaying error 400

    1. You must ensure that you've added the Facebook Sdk to your blog as mentioned in the post.

  2. Did not work on my blog www.denisonsblog.blogspot.com

    1. If you've added the Facebook javascript sdk to your blog's html, it will work. Try again...

  3. Hello sir ogbonge please I would like you to do a post in how to convert asp.net Cs file to php...
    Please it would be helpful to me please sir help me and do it.
    Thank you.

  4. man you redesign dis blog ow, shebi you done move from blogger to WordPress

    1. lol. when did I move to WordPress?

  5. Honestly; your blog is the number tech blog in africa. Gosh always updated. Facebook floating plugin; mhen applying this now


Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post or you're trying to ask question about an old post, please drop it at our discussion platform here.