How To Add Floating Social Media Sharing Buttons To Blogger

Some of our readers asked us about some widget on how to add a floating bar of social media buttons to a Blogger/Blogspot blog. So we scripted the widget, hence you don’t have to go into your template HTML to install (or remove) it. We have done it so simple, where you can only copy the whole code and paste into a HTML/Javascript gadget.

Here in this How-to add social media sharing buttons guide we have included Facebook Share, Retweet, StumbleUpon, Digg This and Google +1 (plus one) buttons in the left bar. Each of the share button comes with a a live counter. Here depending upon the f-likes, re-tweets and other likes the counter will increase in number.

How to add the buttons

1. Login to your Blogger dashboard.

2. Go to Layout > Page Elements.

3. Now Click on Add A Gadget.

4. In Add A Gadget window, select HTML/Javascript .

5. Copy the code below and paste it inside the content box.

<!-- Floating Social Share Buttons-->
<style type="text/css">
#pageshare {position:fixed; bottom:20%; left:50px; 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;/*bs-fsmsb*/-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="Get this from Poketors.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
</div>
<!-- End of Floating shares -->

6. After copying, save the gadget.

7. Now drag the gadget and reposition it under Blog Posts gadget.

8. Click Save arrangement button on upper right corner.

How to customize the buttons

1.Vertical alignment

You need to change the value of bottom in code line 3. That code will position the button relative to the bottom of your browser window. In case you want to fix the distance even when window is resized, specify the value in px (pixels) instead of %.

2. Horizontal alignment

Change the value of margin-left (search for the code). Now here if we enter 'negative value' which will push the button to the left of the main blog column, in case we enter 'positive value' it pushes it to the right.

So, to position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.

3. In case, replacing and removing buttons

You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'>
BUTTON CODE
</div>

While replacing the button, simply replace the button code with the new code. To remove the button, delete the whole div.

If you face any issue displaying your Google +1 button, despite other buttons appear successfully, try this :

• Go to Template > Edit HTML and find this line:

<body expr:class='"loading" + data:blog.mobileClass'>
or
<body>

• Now copy the code in step # 5 and paste it right below the line.
• Click preview before saving.

We have done installing the widget for floating social media share buttons bar.