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

  • http://www.filespick.com Katrina Kaif

    nice job

  • http://www.thenigeriahost.net Kome Itoje

    This is a great post. Thanks.

  • http://electronicsrepair.tk/ Electronic

    nice post, this is what I am looking kingd of plug in for wordpress.

  • http://www.advertisingboard.com/ DavidS

    Very good for blog, would be better if you could make for blog and websites also.

    Thanks

    • Don Caprio

      It works for any website as well. Just paste the code anywhere in the body

  • http://saltox.net/ SALTOX

    Nice share

  • http://cyber-naija.co.cc crack-kid

    thanks man it has bin very good post

  • http://worldoftricks.com umar

    nice job

  • http://muazfaris.com muazfaris

    Thank you for the info, it very help me for my last post.. tq.!!

  • http://www.couponsforindia.com/jabong.com/ Jabong Coupons

    Really useful
    Thanks for sharing ;-)
    But please tell me code for Google+ and Pin it Button

  • http://deluxejournal.com otobong

    It works fine for me thanks don.

  • http://metrolisa.info Metrolisa

    wow let’s see in my blog that’s amazing thanks for your kind

  • http://massivewealthreport.com massive wealth report

    this is beautiful caprio. putting it on my site straight away. nice post man

  • http://www.cybernaija.info crack-kid

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

  • http://www.silinder.com Foto Artis

    Hi, Could you update with “Pin it” script. Thanks

  • http://www.download-ar.com download – تحميل

    thank you verey much
    l like the nice post
    good luck my freind

  • http://www.thingsoverflow.com yoginder

    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

    • http://www.doncaprio.com Don Caprio

      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.

  • http://beautyandmakeupmatters.com Poonam

    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

    • http://www.doncaprio.com Don Caprio

      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.

  • Alexandra Clatterbuck

    Code didn’t work for me on WordPress =(

  • http://iamserendipity.com Susan

    This is great! Is there a way to make them not float? Thank you.

  • http://www.emitez.com/ anis

    very helpful article thanks for sharing

  • http://www.rishikeshriverrafting.com Anubhav Roy

    Great Post! Thanks.. This is just what I was looking for for the WordPress blog on my website.
    God Bless you!

  • http://infosaja.com Abed Nego

    Great post for me,

    I want to do on my blog.

  • http://www.techera.tk Abinodh O.T

    Great post man! Why don’t you make a plugin out of this?

  • http://www.oublogs.com Ratanak

    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

    • http://www.doncaprio.com Don Caprio

      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.

  • http://www.elevatedblog.com Lawrence Abiodun

    Thanks for this once again!
    Please which plugin are you using to highlight your code

    • http://www.doncaprio.com Don Caprio

      It’s no plugin. Just a little CSS.

  • http://www.donteevibes.info Tobi

    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 ?

  • http://www.geeksripe.com Muneeb Ahsan

    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

  • Heart

    nice wordpress plugin, this will help people like me that dont know how to code but best in doing marketing and advertising.
    social viral marketing

  • http://www.adetechblog.com Adesanmi Adedotun

    TheDon,

    Thanks for sharing for the likeness of our blog

  • http://www.lordbnf.com Olili Bob

    Nice one boss, i will sure try this,tnx for sharing

  • http://www.moneyhomeblog.com frank joseph

    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.

  • http://buyvinemarketing.com/ Buy Vine Likes

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

  • Kris

    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?