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

<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>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://geek.ng/2012/01/how-to-add-floating-share-buttons-to-wordpress.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

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

. Filed Under: Wordpress




Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. crack-kid says

    don ive been looking for this widget for long but i couldonly find the one for blogger.Thanks so much

  2. yoginder says

    nice post and your music search engine is just awesome . please tell me in which language you have made that ??
    Read my last post : http://thingsoverflow.com/you-should-watch-this-10-movies-before-you-die-top-movies/.html

    • Don Caprio says

      Thanks for dropping by, Yoginder. The MP3 search engine is basically PHP though it’s a third party script I bought, edited, added some functionality and customized to taste.

  3. Poonam says

    Thanks for such a wonderful work. Finally your code worked for me.
    But I l have a small question which is a better method to get social share buttin using Text box Widgetr or custom function. Response is much appreciated.
    Thanks

    • Don Caprio says

      You’re welcom, Poonam. I think both is important. You can use the custom function for posts and the text box widget for your fanpage.

  4. Ratanak says

    Hello friend,
    i have tried to copy and paste your code. Of course it appears great but it seems not like what you exist in your blog. How can I do that by just showing them on post only, not every page and like your existing one floating on this post.

    Thank you

    • Don Caprio says

      Hi Ratanak,

      What I have here is very different from the one in the article. I came up with it just recently and haven’t been able to share it. To make it appear on certian pages only, you may need Widget Logic plugin.

  5. Tobi says

    Thanks for the codes above its been working for my blog, i was tempted to have it on my blog when a friend called me to do it asap for more traffic an exposure. but please how did you add the floating reccomended post widget that appears on your blog poost when am busy reading them ?

  6. Muneeb Ahsan says

    That’s an amazing tutorial, social buttons are really important to share the content on social media such like Facebook, twitter and others. keep writing such great articles

  7. frank joseph says

    Thank you for this tutorial and although there are plugins that can easily do this, i prefer to use less plugins on my websites as it always make it to load slow.

  8. Buy Vine Likes says

    I think there is definitely so many great benefits that come from using social media so much. Glad that they are using it here.

  9. Kris says

    Dear Don,

    I have a problem with my site and i think you could help me.
    Your tip is good but i cant use widget fot that.
    I am wordpress user and i want to add button on the right side of my page.
    I cant fing plugin for that. I want to have small color image which links to page with our offer for kids. image/button always at the middle hight and max right side.
    Something like this on page: http://level77.eu/
    but dont need them to slide if its a problem.

    Can you help me?

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)

Current ye@r *