How to Add Floating Share Buttons to WordPress without Plugin

It is quite simple to add a floating share button to your WordPress blog. All you need do is follow this step by step guide and you would have added your floating share buttons to your wordpress blog without any plugin.

This Floating Share Button Contains

• Facebook Like
• Twitter Share
• Stumble Upon
• Digg
• Google Plus

Now to add the Sharebuttons to WordPress, Here is your guide

1. Login to your WordPress Dashboard and Click on Appearance > Widget

2. Drag the Text widget to your sidebar and paste the code below in the text area.

 

<style>
#pageshare {position:fixed; bottom:3%; left:10px; float:left; border: 1px solid #bbb; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:2px 2px 0 2px;}
.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>
<br/><div style=”clear: both;font-size: 9px;text-align:center;”><a href=”http://www.oscarmini.com/how-to-add-floating-share-buttons-to-wordpress-without-plugin” rel=”dofollow” target=”blank”><font color=”black”>[Get Widget]<font></font></font></a></div></div>

 

3. Save and view your blog. If you wish the floating share button to appear at the right hand side of your blog, find left:10px; in the code and change to right:10px;. You can also change the background color from white in my code to any color of your choice by finding background-color:#ffffff; and change #ffffff to whatever color code you wish.

You can see my floating share Button at the left side of this blog.