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–>
<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:

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.

9 Comments

Leave a Reply
  1. 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.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

How To Add Facebook JavaScript SDK To Blogger Themes Without XML Error

Glitz Meets Style as Timekeepers Unveils New Store and Brands