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;}
</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://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>
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
nice job
This is a great post. Thanks.
nice post, this is what I am looking kingd of plug in for wordpress.
Very good for blog, would be better if you could make for blog and websites also.
Thanks
It works for any website as well. Just paste the code anywhere in the body
Nice share
thanks man it has bin very good post
nice job
umar recently posted..فیس بک چیٹ کا مسئلہ حل کریں
Thank you for the info, it very help me for my last post.. tq.!!
muazfaris recently posted..Floating Share Button di Sidebar Blogspot | Tutorial
Really useful
Thanks for sharing
But please tell me code for Google+ and Pin it Button
Twitter: otodeluxe
says:
It works fine for me thanks don.
otobong recently posted..m.vuclip.com : Download 3gp(mp4) Mobile Videos to Phones
wow let’s see in my blog that’s amazing thanks for your kind
Metrolisa recently posted..How to Get Started Affiliate MarketingIn 6 Easy Steps
this is beautiful caprio. putting it on my site straight away. nice post man
don ive been looking for this widget for long but i couldonly find the one for blogger.Thanks so much
crack-kid recently posted..Unlock your locked memory card
Hi, Could you update with “Pin it” script. Thanks
Foto Artis recently posted..Foto Nakal Kiki Azhari “Bintang Iklan Ponds”
thank you verey much
l like the nice post
good luck my freind
download – تحميل recently posted..تحميل بحث عن اخلاق النبي اللهم صلي وسلم عليه – بحث عن اخلاق المصطفى – البحث في اخلاق المصطفى
Twitter: thingsoverflow
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
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.
Twitter: Poonam_BMM
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
Poonam recently posted..Biotique Bio Berberry Cleansing Lotion Review
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.
Code didn’t work for me on WordPress =(
Twitter: iam_serendipity.com
says:
This is great! Is there a way to make them not float? Thank you.
Susan recently posted..It Is Never About The Other Person
Twitter: thescript102
says:
very helpful article thanks for sharing
anis recently posted..Great SEO Advice To Boost Your Web Traffic
Great Post! Thanks.. This is just what I was looking for for the WordPress blog on my website.
God Bless you!
Great post for me,
I want to do on my blog.
Abed Nego recently posted..Info Harga Samsung Galaxy Tab Terbaru 2013
Twitter: silverknight97
says:
Great post man! Why don’t you make a plugin out of this?
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
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.