Adding Floating Share Buttons To Wordpress Without Plugin

You know just how it is when you’re searching for a worpress plugin without finding the one that does exactly what you want. I tried looking for a wordpress plugin to display the exact type of sharing buttons I was using on blogger but the one that looked almost like it didn’t work so well. These floating buttons include facebook share, facebook like, google +1, tweeter, stubleupon and digg. You can display the buttons onthe left or right side of the page as you can see on this page you’re presently reading. Adding the share buttons to your wordpress blog is quite easy as there’s absolutely no need editing your template.

How to Add Floating Share Buttons to WordPress Without a Plugin

1. Go to Appearance > Widgets

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

<!–SideBar Floating Share Buttons Code Start–>

<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:#eff3fa;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: 9px;text-align:center;"><a href="http://www.doncaprio.com/2012/01/how-to-add-floating-share-buttons-to-wordpress.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

3. To make the buttons float to the left, find right:10px; in the code and change to left:10px;

4. Just save and view your blog to see the buttons appear.

You can style the share buttons by changing the background color and other things. To change the background color, simply find and replace #eff3fa in the code with your own color code.
If your’re on Blogger platform, I suggest you check this post – Floating Share Buttons For Blogger

Get free daily email updates!

[Get this widget]

Tags:

floating share button wordpress, floating share wordpress, floating share plugin, wordpress float share without, wordpress floating share button, share button wordpress, share float buttons, share buttons wordpress without plugin, add share button to wordpress without plugin, wordpress share without plugin, float share button wordpress, how to add floting share buttons in wordpress, twitter floating html widget, social share wordpress without plugin, social share buttons wordpress without plugin, sidebar floating sharing plugin, share this plugin, floating wordpress plugin, share button wordpress no plugin html, wordpress floating html

Don Caprio

Don Caprio is a part-time blogger living in Nigeria and apart from blogging, his other obsession is hip-hop music. :) You can follow my updates on Twitter or add me to your circles on Google+! You can as well grab my feed and get updates through email.