Adding Floating Share Buttons To WordPress Without Plugin

Shortlink:

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

Comments

  1. Katrina Kaif says:

    nice job

  2. This is a great post. Thanks.

  3. Electronic says:

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

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

  5. Nice share

  6. crack-kid says:

    thanks man it has bin very good post

  7. nice job

  8. muazfaris says:

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

  9. Jabong Coupons says:

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

  10. It works fine for me thanks don.

  11. Metrolisa says:

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

  12. massive wealth report says:

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

  13. crack-kid says:

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

  14. Foto Artis says:

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

  15. download - تحميل says:

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

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

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

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

  18. Alexandra Clatterbuck says:

    Code didn’t work for me on WordPress =(

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

  20. very helpful article thanks for sharing

  21. Anubhav Roy says:

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

  22. Abed Nego says:

    Great post for me, I want to do on my blog.

  23. Abinodh O.T says:

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

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

  25. Lawrence Abiodun says:

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

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

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

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

  29. Adesanmi Adedotun says:

    TheDon, Thanks for sharing for the likeness of our blog

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

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

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

  33. 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 *