Home » Blogger » Add Floating Share Buttons To Your Blog’s Sidebar (For Blogspot)

Add Floating Share Buttons To Your Blog’s Sidebar (For Blogspot)

Posted on by

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.


<!--SideBar Floating Share Buttons Code Start-->

<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>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></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:


<!--SideBar Floating Share Buttons Code Start-->

<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>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></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.

Get free daily email updates!

Follow us!

Tags:

floating share buttons, floating share buttons for blogger, share sidebar, floating share button, floating share button for blogger, share buttons for blogger, floating share widget, share button for blogger, share buttons, floating sidebar, floating share button blogger, floating share buttons blogger, blogger floating share buttons, add floating share buttons to blogger, share buttons blogger, blogger share buttons, blogger floating sidebar, sidebar share, sidebar floating share buttons, floating sidebar blogger
avatar

Don Caprio

Don Caprio is a part-time blogger living in Nigeria and apart from blogging, his other obsession is hip-hop music. :) You can follow my updates on Twitter or add me to your circles on ! You can as well grab my feed and get updates through email.

More Posts - Website

Facebook Comments

Facebook comments

Related posts:

  1. How To Add Large Share Buttons To Your Blog Posts
  2. Google Adsense Approval Tips for Blogspot Blogs
  3. Numbered Page Navigation / Pagination For Blogspot/Blogger
  4. How To Add Facebook Comment Box For Blogger
  5. How To Add Email Subscription To Your Blog
  6. Adding Facebook Like Button To Blog Posts (For Blogspot)
  7. How to Add Related Posts Below Your Blog Posts
  8. How To Add Facebook Like Button To Your Blog
  9. How To Set Up Blogspot Address To Use Custom Domain
  10. Add Email Contact Form To Your Blog

110 thoughts on “Add Floating Share Buttons To Your Blog’s Sidebar (For Blogspot)”

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

    Reply ↓

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

    Reply ↓

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

    Reply ↓

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

    Reply ↓

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

    Reply ↓

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

    Reply ↓

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

    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.

      Reply ↓

    • I checked again and even viewed the page source but there was nothing between the widgets. I think the space is normal though.

      Reply ↓

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

      Reply ↓

    • The floating share buttons sure works on blogger, wordpress and any other site that supports HTML. Just insert it somewhere in the body.

      Reply ↓

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

    Reply ↓

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

      Reply ↓

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

      Reply ↓

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

    Reply ↓

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

      Reply ↓

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

      Reply ↓

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

    Reply ↓

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

    Reply ↓

  84. 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.)

    Reply ↓

  86. 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!

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Commentluv Enabled