Apart from working on traffic and search engine optimization (SEO), there’s a need to intergrate your blog with popular social networking platforms. A floating share buttons (social bookmarking) widget by the right of every page is just one of the gadgets you must add to your blog if you intend to get free traffic from facebook and twitter. I wrote a post last week that went viral thanks to the power of facebook sharing. The post received close to 500 facebook likes in just a week! Underestimating the power of share buttons is like neglecting a major source of traffic to your blog. I’ve already written several posts on integrating your blogger hosted site with facebook, google plus and the rest of them. These posts include adding like buttons to individual blog posts, adding google plus buttons to blog posts, facebook comment box for blogger and large share buttons under blog posts among others.
Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting. Unlike the previous ones, it’s easy to get this done as you won’t need to do any sort of HTML editing on your template. The floating sidebar sharing widget comes with the most popular social sites. You can see the widget just at the right side of this page and it scrolls with the page, leaving your visitor no choice but to share your content.
How To Add Floating Share Buttons On The Sidebar
1. Log in to your blogger account and click on Design
2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save. There’s no need for a title.
<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://www.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
<!–SideBar Floating Share Buttons Code End–>
5. Save the widget and preview your blog.
If you already have a google plus button above or below your posts, the one in the widget might not appear. It seems you can’t have two +1 buttons on a page.
If you’re using a dark template, you can try out the code below if you don’t quite like the first one:
<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:#000000;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/2011/09/sidebar-floting-share-buttons-large.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
<!–SideBar Floating Share Buttons Code End–>
For wordpress users, You can check this post – Floating Share buttons for WordPress.
These floating sidebar share buttons will surely make you get more facebook likes. Share this post if you find it helpful.
it worked for me guys u too use this cool widget in your site………
It is really very helpful for SEO. Thanks for give this free code…
how to use on other side.
Search for this: #pageshare {position:fixed; bottom:15%; right:10px;
Change it to this: #pageshare {position:fixed; bottom:15%; left:10px;
Note that you're only changing right to left.
Thanks! I will try this soon as i get my laptop! I cant do any editing on my ipad
The top FB button does not have the correct count for my page. Can you please tell me how to edit this?
Of course it's the same as the one I'm using here. It counts "likes" and "shares" together
how to use it on right side???
Search for this: #pageshare {position:fixed; bottom:15%; right:10px;
Change it to this: #pageshare {position:fixed; bottom:15%; left:10px;
Note that you're only changing right to left.
Can You make The icons PNG Images And But A FeedBurner Icon Thanks
Thanks…I really love it…it really work….
http://jonpageblog.blogspot.com/
nice one !
it doesnt show the correct number of people following me on twitter and facebook? How to correct it?
Of course it does…it shows the correct number of shares, likes and tweets.
Cool ^_^
You have written well. go ahead
Do you want to download Famous Movie? visit here http://3dmoviz.blogspot.com/.
woooooooooooow it really worked for my blog thaaank you!
You're welcome, Maria. Glad it worked for you
amazing…..hahah it worked for my blog. thanks!
How do I make the facebook like button go straight to my facebook page like normal facebook like buttons, what part of the code do I edit
@Don Caprio – Don, I noticed that sometimes I have my Google + button and sometimes I do not. Can you please tell me what comes to mind about that? Have you encountered the same with yours or know of someone that had this issue because of something they did?
Ah, it is happening w/ yours, too. I have a snap shot if you would like to see.
It's exactly the same here too and I haven't been able to figure out how to fix it. I always assumed it was due to my slow connection.
I think that I have fixed it on mine. I think I had an extra Google script.
nice post.thnx for sharing.check this also it will be useful.
how to add any share button you want to this widget
http://www.tech-cave.com/2011/12/add-any-share-botton-to-floating-share.html
i guess the facebook like on this floating toolbar counts the no. of likes for the current post being displayed. if i am right please tell me how to change that to show thw no. of likes of the facebook page
I did everything as you write here for automatic redirection of Opera Mini to WAP2 but when I open it on Opera Mini, PHP Error Message appears “Parse error: syntax error, unexpected T_BOOLEAN_OR in /home/*********/public_html/forum/index.php on line 114″.
Please help me.
I want to redirect people to this WAP2.
I was wondering how this comment appears on the wrong blog post. It should be here – http://www.doncaprio.com/2011/10/customizing-simple-machines-forum-smf.html
Anyway, I think you made a mistake editing the file. You need to retrace your steps or restore the default index.php from SMF package and try again.
Thanks. This was helpful. For a long time I have been trying to implement share buttons as well as like on my blog. Now I have added, thank to this post. However, when I click the like button, my friends do not see that activity unless they are viewing my profile. How do I solve that? I intend to use like button to drive traffic to my blog. But unless my friends see activities of friends how will the traffic increase?.
It’s probably due to your facebook privacy settings.
Twitter: wpbunk
says:
Hi thanks Doncaprio,
You are doing a great job here.I recently added this widget to my blog.It is working properly but there is a small problem.After adding this widget to my blog there is small blank rectangular box on the right side of my blog.I will be really thankful to you if you could solve the problem.
Here is my blogspot blog-
http://gadgetsmaniac4u.blogspot.com
Looking for your reply.
I checked your blog just now and everything looked ok. I couldn’t find the blank space and I guess you’ve resolved the issue.
Twitter: wpbunk
says:
Hi Don Caprio,
Thanks for looking into my blog but the issue is not resolved yet.There is a box between the sponsors and facebook like box on the right side of my blog.It is having same width other widgets but small height.It appeared after inserting floating buttons code.I want to remove that.Please help me.
http://gadgetsmaniac4u.blogspot.com/
I checked again and even viewed the page source but there was nothing between the widgets. I think the space is normal though.
thanks! this is really very nice button code !
Twitter: wpbunk
says:
Hi Don Caprio,
The problem is solved now.A friend helped me.Thanks for looking into my blog.You are so helpful.More power to you and more success to your blog.
How do I change the buttons? I want the sidebar to look like this sidebar, http://stellarcorpses.com/
Please write me back!
There’s no way to make this particular one look like that except one comes up with a different code, changing the layout and css. Better still, you can run a web search.
Twitter: otodeluxe
says:
Hello, thanks for the code. But please can it work on wordpress too?
Yes, it does work on wordpress. As you can see, it’s on the right side of this page.
Thank you so much! This is just what I was looking for! Not sure how it works with each different website, but I’m sure glad it does!
The floating share buttons sure works on blogger, wordpress and any other site that supports HTML. Just insert it somewhere in the body.
Love this, thanks!! Is there one which has link to pinterest too?
I installed this tonight and love it but hoping for a bit of help. If you check out my blog you’ll notice I have a facebook like box on the right side of my page. I only want the FB share button on the floater, but when I remove the like it causes the one for my page to stop working. Man that’s a lot of using the word like. Is there something in the code that I’m missing?
You only need to remove this code:
<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>This is great – super-easy instructions. Thank you!
Is it possible to add a “pin it” button for Pinterest?
I haven’t been using Pinterest but I’ll see if it can be done. Thanks for visiting!
That would be awesome! There are tons of articles out there now about how much traffic Pinterest is driving to web sites.
Did you figure it out Chibi?
Melissa recently posted..Circle Scarf
The for the great help buddy.
very very helpful..thank you very much
Awesome post ,thanks for sharing its very helpful .
Hello,
How can I use the code for post pages? It displays on home page only at present in blogger.
Regards
The widget appears on all pages by default except you’ve already done something preventing the widget from showing.
Thanks a lot for the info. I have integrated floating to my website http://www.mrtechpathi.com …
It works fantastic on my website! Please check and leave you feedback http://www.findingnino.com
any tool for wordpress?????????
Yes, you can read this – http://www.doncaprio.com/2012/01/how-to-add-floating-share-buttons-to-wordpress.html
thanks very match
Thanks a lot its working in my website also http://free-wallpaperz-download.blogspot.com/
is it possible to float the menu in the bottom of the page?
You’re welcome
I guess it’s possible if you can work out the css
can you please help us.. to float the share menu in the bottom of the page
I tried to add the code in my blog http://www.ebooksdownload.tk and it really worked great.Thank you.
Its working bro…Thanks!
Thanks! It works perfect!
thanks it works…!! btw, I recommend you to change the position of your floating widget…coz it’s covered by your next and previous button…
don’t forget to visit my blog at
Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda • Tips Blog • Hitsuke
I’ll do something about that.
Thanks
I try to add in my web http://www.czoot.com/,
But in my laptop it works grt , But when i saw intomy desktop ,it become prob . Just my site loading and loading .
my site is http://www.czoot.com/
please tell me what i do ?
And it’s the same when you refreshed? If you’re having problems with it, I suggest you remove it but I’m using it on a couple of sites without any problem whatsoever. You connection speed too might have dropped.
hey don caprio ! your awesome ,…it works great…was searching since long time
thanks alot …
my blog is http://www.androidcop.blogspot.com
nice thanks u very much…………
magic!
kudos!
oba recently posted..EFCC Slams Sylva With 6-Count Charge
Thanx a lot. Really worked on my blog. Just check it.
sonia recently posted..Add Floating Share Buttons to your blog
thanx a lot.
http://hottest-tips-and-tricks.blogspot.in/
Awesome! works perfect, but does anyone could post something like these social media counts will reflect the same count on other post or page?
phan mem crm recently posted..Lợi ích của việc ứng dụng OpenERP
AWESOME!! Thank you so very much
Anne recently posted..For love of candles
Thank U so so so Much it Works for me
) )
Fabulous! Works perfectly! Have you had a chance to look into adding a Pinterest option yet? That would be much appreciated!
WhisperWood Cottage recently posted..Gold and Bold: Refurbished Thrift Store Clock (and a Spray Paint Giveaway!)
thanks for the floating widget, you’re awesome.
thanks for oyur widget
http://funny-indian-pics.blogspot.com
Tnx for the great post! It works really great! Easy to do also. Only one question, how do i get nice share buttons on the mobile website of my blog?
iDevizes.blogspot.com a blog all about Apple, iDevices and iOS
I don’t know much about customizing blogger’s mobile template, Jitendra. It would’ve been different if it were wordpress.
You can only activate blogger’s default share buttons which also appears on mobile.
It Looks Great in my Blog, Thanks
how can i change floating to left side of my blog
http://www.techiedas.blogspot.com
Search for this: #pageshare {position:fixed; bottom:15%; right:10px;
Change it to this: #pageshare {position:fixed; bottom:15%; left:10px;
Note that you’re only changing right to left.
Thank you so much, been looking for this forever! I have to make it perfect tho, tweak here and there
Thanks For Sharing This Amazing Post !!
Dexter recently posted..A Software That will Enhances And Manages Your Complex Print Jobs | IamMitul
Button added and it worked properly on My BLog!!!
Thanx for the post Really great help!!!!!!
Kanchan recently posted..6 Superb Ways to Get Traffic on your Blog
amazing !
Geets recently posted..Lets Change Our Society
it’s work and looking elegant in my blog thanks
munir ardi recently posted..Award Dari sahabat Baru
i think many blogspot user will like this post.. wowo.. thank you again!
muazfaris recently posted..Floating Share Button di Sidebar Blogspot | Tutorial
worked like a charm. Thanks man. thanks a lot!
Vineet Digga recently posted..Why we will never be able to see the Gods!
thank you very much
thanks for sharing
Really cool widget, thanks a lot man!!!
Snowball recently posted.."Το Κεφάλαιο" του Karl Marx σε manga!!!
Thank you, Don! This is what I’m looking for. I remove my old widget and replace it with this one
Lizanovia M. Hadi recently posted..21 April dan Emansipasi yang Kebablasan
thanks!
Thanks a lot for this!
i loved it! but there is some problem with the top most facebook like button, it doesnt show anything! plz help 
Thanks in advance!
-
Blog address: http://c5-nokia.blogspot.com
Saurabh recently posted..Restore or find the forgotten password of your Nokia C5-00 and other S60 devices
thanks! this is really very nice button code !
Waheed recently posted..Aishwarya Rai 2012 Calendar – First Look
Great widget! Thanks so much! I saw that there was a question about adding the Pintrest button into this earilier, but didn’t see the code. Do you have a code we can add in order to include Pintrest or the “Pin It” button into this gadget?
Thanks so much, so easy to use!
Nice Post..
Thanks..!!
http://www.salmankfc.com/
nice..
http://www.salmankfc.com
Gul Ahmed recently posted..Akshay Kumat Wants a Movie with Katrina Kaif
Thanks for sharing!
Funny Jokes Daily recently posted..Funny Jokes – Home improvement
my site is asking for the url
Thank you so much for this code. I cannot express my feelings in words. I searched for this code all around the web and i found it only on your website
Twitter: divyanshojha
says:
caprio whenever i use my site on low resolution ( or press ctrl and + ), the social buttons merge into the post. Can you solve this because it reduces the readability of the blog. instead of floating over the post it should move away with decreasing resolution like in this blog : http://www.buzzparas.com. Please help me soon with this problem.
(And one more thing , though this is not my priority – Please do tell how to change the facebook like to work for whole site instead of individual post.)
Nice Jobs, Thanks
swebit recently posted..Free Download IZArc 4.1.6
Can you share us the code with pinterest as well? I see you have added pinterest but I cannot find the code elsewhere. It’ll be much appreciated. Thanks!
Actually, I’m using a WordPress plugin abut I’ll see if I can intergrate Pinterest Button along with this. I’ll post an update if it gets done.
It’s been updated – http://www.doncaprio.com/2012/05/adding-floating-share-buttons-with-pinterest-pin-it-for-blogger.html
I love the idea but can it be integrated in smf ? if yes what color will suggest for my forum @ http://www.obasimvilla.com/forum
Uwazie Simon recently posted..Words you never thought you’d hear from me Thanks Microsoft.
Great post. thank you. i will implement this soonest
Skin care recently posted..How At home microdermabrasion machine Can Help You Get Younger Skin
Nice one. It work for me.
Thank you so much
Yoseph recently posted..The Like Button_Yoseph
I can try
Twitter: divyanshojha
says:
Hey don,
i added this code in my template instead of widget so that it appears only in posts and not in homepage.
But after doing that my facebook like box is not appearing in sidebar ( that 300*300 like box of my facebook page)
Divyansh recently posted..Easy Way to Run Android Apps on Windows 7,Vista,XP
That shouldn’t be, I have no idea why that’s happening except something is probably messed up within the template. There’s one other widget you may want to try out, the updated version of this: Adding Floating Share Buttons with Pinterest ‘Pin it’ to Blogger Posts – It’s specifically made for post pages.
kool site …i always learn something from your site – i see you into music . I am also. Music promoting that is ..http://www.crunkatlanta.com
Crunkatlanta recently posted..STRIP CLUB QUEENS REALITY SHOW TRAILER
Thanks for the compliment! I’m glad you find the site useful.
hi…thx for the code….following u now…for more updates….
Smita Singh recently posted..Purple Moments – New name for smitazzworld
Thank You SO much for this AMAZING and Super SIMPLE gaget! I LOVE it! It is one of the easiest gagets to install. This for sure is a MUST for any blog. Love, Love, LOVE it! I really appreciate it so much! Terri of Two Pink Peas http://www.twopinkpeas.com http://www.facebook.com/twopinkpeas http://www.twitter.com/mytwopinkpeas http://www.pinterest.com/twopinkpeas
nice post i will add this into my prowser
Very nicely explain every thing. Thanks for the post. Please provide how to add floating share point on wordpress blog also ..
http://www.thingsoverflow.com
Yoginder recently posted..Final Destination 5 Movie Free Download in HD Print
You may check this post – Adding Floating Share Buttons To WordPress Without Plugin. You can also use Digg Digg plugin. it’s what I’m presently using.
Hi, do you have WordPress version for this? I love this floating social media icons.
Yes, there is. Adding Floating Share Buttons To WordPress Without Plugin
Can we add more tabs? If yes, can you please show me on how to do it? I’ll be glad if you can help me. Thank you.
To add more buttons, you need to get the code for the button and insert it inbetween the existing ones. BTW, there’s an updated version of this with pinterest button – Adding Floating Share Buttons with Pinterest ‘Pin it’ to Blogger Posts
Twitter: sitescage
says:
thanks alot for this tutorial I just installed it ..
Wonderful Trick… i love that… no where on web i found it but only yours website. Thanks
for some reason, sometimes when the page is loaded on my blog, the sidebar is over the blog, not on the empty sidebar. It also doesn’t include all the buttons you have listed. Any help?
bilikeme recently posted..Share & Share Alike
not showing in the empty side bar area of my blog..sometimes shows up in the sidebar itself covering some other info.
bilikeme recently posted..Share & Share Alike
It may overlap text at low screen resolution and there’s no workaround for that yet.
Is this code for blogger plateform or i can use it to any other plateform.
It can be used on other platforms.
its working fine on my blog http://javacourseblog.blogspot.in but i am having positioning problem plz help me
alice recently posted..Abstract class faq
Change the first
float:left;in the code tofloat:right;Twitter: HellaQuirky
says:
Thanks for this helpful, and super easy tutorial. I installed it into my blog without any hassle. Without content like yours and others on the internet, I doubt I’d have made as much progress modifying my blog! Thanks, again.
HellaQuirky recently posted..Teaching dogs to drive cars… No really, it’s pretty awesome
Twitter: thescript102
says:
very nice post thanks for sharing
anis recently posted..24 ways to boost your BlogTraffic
Twitter: shemul49rmc
says:
Thanks for the code its really helpful.
Shemul49rmc recently posted..How to Add JQuery Slide Out Social Share Buttons to Sidebar for Blogger
Twitter: googlai
says:
Thank you for best sharing codes. it is really helpful for me to add a share widget in my blog. i appreciate your contribution.
Googma Sansar recently posted..Highest Peak in the world
Twitter: zulhan_hyo_jo
says:
can i out this Floating share button on blogger/blogspot ?or just for wordpress self hostinga?,
Twitter: zulhan_hyo_jo
says:
can i put this Floating share button on blogger/blogspot ?or just for wordpress self hostinga?,
It works on both.
Twitter: nbalover21
says:
hey thnx for the help mate
!
http://progamerzarena.blogspot.in/
http://progamerzarena.blogspot.in/
http://progamerzarena.blogspot.in/
check out my awesome gaming blog too
Twitter: ammagist
says:
pls don cappy..lolzz. i want you to gimme the code to add: you may also like this on my blogger blog on my blog. thanks
Thanks a lot Don!
Rohit recently posted..We burn we resist we fight for freedom in Tibet
Twitter: Dailyschoolnews
says:
Thanks Dc, i really appreciate this, thanks alot.
thank you Don Caprio, i am really impressed to view your article its really helpful and i was looking for this, i am going to apply it on my blog……
Nazia shah recently posted..South indian actress Sheena Hot and wet dress
Twitter: pratikbhuite
says:
Woaw This Is just what i’m searching For.
Thanks
Pratik Bhuite recently posted..Need for Speed Most Wanted 1.0.46 apk Android Setup Crack Download NFS
thanks
برنامج علي متصفح
صور بنات
صور حب
صور حزن
برامج كمبيوتر
Game Mario recently posted..خطبة الجمعه للشيخ محمد حسان 29-3-2013 بالفيديو 29 مارس الخطبة مباشر
Twitter: asimnawaz0842
says:
Thanks for this nice social bookmarking tool. It really increases our social media presence. I have just one suggestion . Please also add a demo link here. Thanks. Keep the good work going.
asim nawaz recently posted..Benefits of New Technologies in IT