Add Floating Share Buttons to Blog/Website - Facebook Twitter G+

While an eye-catching blog design with a catchy domain name is vital to blogging success, floating Share buttons can be really handy. Floating Share buttons can be really handy, they go wherever the visitor goes and hence gives a better chance for one of your Blog Posts or website articles to be Tweeted, Facebook Shared, Dugg, Stumbled or Plus oned! We use these Share Buttons On our Tech Blog.

You can add this feature to any Blog or Website, I personally have tried it on Blogger Blogs only but the code is pretty simple so it should work on all platforms, including WordPress(Please Confirm and Tell Me, I do not own a WordPress Domain).This feature include Floating Facebook Share, Twitter Button, Digg! Button, Stumble Upon Button, Google Plus One.So add this feature to your site and start seeing more traffic from Social Networking sites.

Add Floating Share Buttons to Blog/Website -

1)Copy the Following Code as it is -

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;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='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<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>
<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 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='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><br/><div style="clear: both;font-size: 7px;text-align:center;"><a href="http://www.techgau.org/" target="blank"><font color="black">Tech Blog<font></font></font></a></div></div>

2)Once, you have copied this, add this code in the HTML/JAVA SCRIPT section of "Add New Widget" in Blogger or you can directly paste it into the sidebar of your Website.

Another Option in Blogger or Custom Domain would be to paste this code in the "EDIT HTML" Section just before </body>.

3)You are done.You should see the Floating Share Buttons on your Blog.

If you have any customization questions, please ask in the comments section, I would be glad to help.

Must Read - Add Google+ Share Button

Gautham On Google+

Get free daily email updates!