Floating Sharing Bar for Blogger Blogs

You might have seen some blogs with a vertical floating share bar widget where Facebook like, Tweet, Google+ buttons are present on the left or right side of the blogs. Adding this floating sharing bar to your blog will make it easy for your blog visitors to Like, reTweet, +1 and share your posts, which will help in increasing your blog traffic.

Though I've explained how to add the sharing bar when I published how to add Facebook Share & Like buttons, Digg and Tweet Button to the side of blogger/blogspot blogs, I've recoded a better one which I decided to share with you. I have replaced "Facebook Like button" with the new Facebook Share button and removed Digg and SU buttons.

More so, since displaying too many social media counters could affect the speed at which your blog loads, I've added a AddThis share button which provide your visitors with over 300+ social sharing options all in one place.

Below is a screenshot:


So, How Do I add the Floating Share bar to my Blogger/blogspot blog?

Adding the Vertical Floating Bar to a Blogger blog is very 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 copy a snippet of code,and drop it into a HTML/JavaScript gadget.

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:

  • Log in to your Blogger account.
  • 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 page sharers Start Share This With Friends-->
#pageshare {position:fixed; bottom:15%; 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;}
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
<div class='sbutton' id='gb'>
<div class="fb-like"data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
<div class='sbutton' id='gplusone'>
<g:plusone size="tall"></g:plusone>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://www.ogbongeblog.com/2013/04/floating-sharing-bar-for-blogger-blogs.html" rel="nofollow">Get this</a></div>
<!-- floating page sharers End -->

Save the gadget and click "Save arrangement" button on the upper right corner.

View your blog and I hope it works for you.


Andrew said…
Thanks for sharing this, Jide. I've just added the addthis share button widget. It looks quite good and very inviting.
Blevopedia said…
Cool and thanks for the tips.
Ekene Ilochonwu said…
thanks a lot bro... i just added it to my blog as well.
thanks jide for your inspiration. what do you think about my new blog? i want the widget to be in the left side what should i do?
Thanks , ve added this to my blog, www.typearls.org. .My readers actually love this too and they can share posts
brainytech said…
An expert you are bro. i just stated my blog this year. Thanks it works @ www.brainytech360.blogspot.com
malik adisa said…
this is great i am really happy with i hope to to add it to my yet to be launched blog.thanks in advance
Emmaunel Akor said…
Thanks for this coed working fine
Saminu Abass said…
Great article to help me on www.saminuabass.blogspot.com
JustPorsh said…
Please how to I get this to show on the Mobile version?
Jide Ogunsanya said…
I don't recommend such because it won't fit well on the small screen of mobile phones. Anyway, you can search the blog for tutorial on how to make a widget display on mobile view. You only have to add mobile='yes' to the widget's code.
Babawale Toheeb said…
Thank you sir it work for me too.
Great post. i am currently using it on my blog www.festoempire.com
James Okpanachi said…
Thank you so much. You do put up a lot of free stuffs on your blog, it really helps coming up bloggers as myself. God Bless Jide.
Stanley said…
Thanks it worked. You can check it out here