Thursday, March 29, 2012

Add Floating Share Buttons on your Site: 7 Buttons!

Google Plus, Twitter, Facebook Favicon

To improve your traffic rank SEO can contribute a lot. Few years back SEO was somewhat difficult. But at present time SEO is little bit easier by the grace of social sites like twitter, facebook, google + etc.

Today I will show you how to add floating social share button to blogspot website. This code will provide you facebook like, Google +1,  Stumble Upon, Digg, Tweet, Linked in and Reddit button.

To add these floating buttons to your blog, just follow the steps below:

  1. Sign in to your blog
  2. Click design from the upper right corner 
  3. Click on layout and hit on Add a Gadget option
  4. Now you'll see a list of gadget and you need to select html/ java script gadget. It will show you  Configure HTML/JavaScript window
  5. Now copy the following code and paste it into the content box of Configure HTML/Java Script window
  6. Now save this gadget
Note: Make sure your blogger dashboard is set to the new look. Click here for more info. 

<!--SideBar Floating Share Buttons Code Start-->

<style>#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px0;z-index:10;}#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}.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='gb'><script src=""></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='gplusone'><script type="text/javascript" src=""></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src=""></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='rt'><a href="" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='' type="text/javascript"></script></div>

<div class='floatbutton' id='linkedin'><script src="//" type="text/javascript"></script><script type="IN/Share" data-counter="top"></script></div>

<div class="sbutton" id="reddit"><script type="text/javascript" src=""></script><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div>

<!--SideBar Floating Share Buttons Code End--></div></div>

If everything is correct then you will be able to see a vertical floating share bar at the left side of your blog.

Customization: This code will give you the opportunity to customize as you like.

Add or Remove Button: You can add or remove button from this code. Notice that each code starts with <div class and ends with </div>. For your convenience I've separated the each code. If you wanna remove one or two codes then just delete the part of the code. When you wanna add something to this code make sure that the new code starts with <div class.

Position: At the beginning of this code you might notice a text like this- #pageshare {position:fixed; bottom:15%; left:3px; float:left;. Now, if you wanna place it to the right side then type right in the place of left. And you can also increase or decrease the size of the button if you are somewhat expert in coding.


  1. woww xcellent!....this gadget is cool...This is better than which i have nw...
    Thanks 4 this!!

    1. Its our pleasure to serve you. Stay close . . .

  2. admin i want add pages on my how it should work or any tips you have please add your article...and Home, software....but if i add post on home.....cant this show my software page so what should i do..

    1. Thanks for contacting us.

      When you can't found any related posts to your query then please inform us through contact page.

      And we have the solution of your problem. A post was published few months ago about pages. You could find it using the search option. Please read the following post:
      How to Create Menu or Tabs in Blogger Blog?

      Still if you feel problem then contact me:

      Thanks again for being with us. :)

  3. what is the code to add Pinterest icon counter to this?

    1. Sorry buddy - Pinterest button doesn't include here. But if you put the code with this buttons, you will get it.

      Visit Pinterest and then look for its buttons. Take the code and use it here. Thanks :)