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

#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;}
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src=""></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src=""></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src=""></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="" 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


  1. 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 :

    • 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.

  2. 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

  3. 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

    • 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.

  4. 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 ?

  5. 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

  6. Heart says

    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

  7. 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: 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!)