Add Floating Social Media Share Button To Blogger

As promised to some of my readers, here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share, Retweet, Stumble, Google Buzz, Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer, of course). You can add more social bookmarking or sharing buttons later if you wish.

I. Adding the buttons

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box.
   view sourceprint?

   
   <!-- floating page sharers Start infochek.co.cc-->
   <style>
   #pageshare {position:fixed; bottom:15%; left: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;/*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 infochek.co.cc">
   <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>
   <div class='sbutton' id='gb'>
   <a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
   <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
   </a></div>
   <div class='sbutton' id='gplusone'>
   <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
   <g:plusone size="tall"></g:plusone>
   </div>
   <div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.infochek.co.cc/2011/06/add-floating-social-media-share-button.html">Get this</a></div>
   </div>
   <!-- floating page sharers End by infochek.co.cc-->
   
   This is the easiest Method
6. Save the gadget.
7. Drag the gadget and reposition it under Blog Posts gadget.
8. Click Save button on upper right corner.

II. Customizing

1. Vertical alignment 
   Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. 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 in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. 
   To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) orright (as in right:10px;) respectively.
3. Replacing and removing buttons 
   You can replace existing buttons with your own. Each button is represented by this code: 
   
   view sourceprint?

   1	<div class='sbutton'>

   2	BUTTON CODE

   3

   </div>

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

Enjoy! and don't be quit yaar. Comment

Click To Visit Our Books Store

I have read some fantastic books on English language that really helped me improve my writing. You can buy my recommended books on Amazon. Here is the lists below:

Books on Grammar:

Books	Buy Links	Rating
The Elephants Of Style		4.5/5
English Grammar in Use Book		4.5/5
Practical English Usage		4.5/5
The Elements of Style		4.5/5
Essentials of English		4.5/5
Handbook of English Grammar and Usage		4.5/5
Woe Is I		4.5/5
Grammar Girl's Quick and Dirty Tips for Better Writing		4.5/5
It was the best of sentences, it was the worst of sentences.		4.5/5
If you want more books on English language, click the link