Adding floating social media sharing buttons

As promised to some of my readers, here’s a tutorial on how to add a floating social media bar to a blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share Like, Retweet, StumbleUpon, Google Buzz, Digg This and Google+1 buttons in the bar and each of them comes with a live counter. You can add more social bookmarking or sharing buttons later if you wish.

floating social bookmarking buttons

 

I. Adding the buttons

  • Adding to Blogger
    1. Go to Layout (old interface: Design > Page Elements).
    2. Click Add A Gadget.
    3. In Add A Gadget window, select HTML/Javascript .
    4. Copy the code below and paste it inside the content box.
    5. Save the gadget.
    6. Drag the gadget and reposition it under Blog Posts gadget.
    7. Click Save button (top right hand corner).
  • Adding to WordPress
    1. Go to Dashboard > Appearance > Widgets > Available Widgets.
    2. Drag Text widget into a sidebar.
    3. Paste in the code.
    4. Save.
<!-- floating share bar Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</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='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->

Updates
July 2012: Remove Facebook Share button and related CSS, and replace it with Like button. You can refer to the old code below.
Oct 2011: Add instructions for WordPress.
July 2011: Remove Google Buzz button. Who needs Buzz when you have Google +1?
July 2010: Add Digg This button. June 2011: Add Google +1 button.


The old code (for reference only, do not copy). Comments 1 to 375 refer to this code:

<!-- floating share bar Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*bs-fsmsb*/-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="Get this from BloggerSentral.com">
<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>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</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='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->

 

II. Customizing

  1. Vertical alignment
    Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  2. Horizontal alignment
    Change the value of margin-left in code line 3. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
    To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
  3. Replacing and removing buttons
    You can replace existing buttons with your own. Each button is represented by this code:
    <div class='sbutton'>
    BUTTON CODE
    </div>
    To replace the button, simply replace the button code with the new code.
    To remove the button, delete the whole div.

Update (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:

  1. Go to Template > Edit HTML (old interface: Design > Edit HTML) and find this line:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    or
    <body>
  2. Copy the share bar code and paste it right below the line.
  3. Replace the margin-left:-71px; in code line 3 with left:10px;.
  4. Preview before saving.

Enjoy!

410 comments to "Adding floating social media sharing buttons"

«Oldest ‹Older 401 – 410 of 410 Newer› Newest»
Greenlava June 15, 2013 at 3:10 PM    

@Sophina Dillard
To add a LinkedIn buttonAdd this code after line 31:
<div class='sbutton' id='linkedin'>
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
</div>

ios devices tricks July 2, 2013 at 4:40 PM    

installing plugins is best but i still prefer using codes since you know what to change! plugins make your site speed slower

Anonymous,  July 26, 2013 at 6:48 PM    

Man, you really rule

Thanks a lot

David Snape August 18, 2013 at 6:27 PM    

does the floating bar load asynchronously or is it blocking?

Greenlava August 24, 2013 at 6:50 PM    

@David Snape
The FB Like script is asynchronous, while others are regular scripts.

Anonymous,  December 4, 2013 at 11:18 PM    

Great code, kudos Greenlava for keeping up for this long. Is it possible to change the facebook count to be connected to a specific targeted facebook page instead of the url of which the buttons are posted? in my case the facebook page for the site has 12,000+ likes but the actual url of the site only has about 500+, i'm assuming it's replacing something in line 12....

Greenlava December 5, 2013 at 12:29 AM    

@Anonymous
It's line 16, try replace it with this:
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false" data-href="Put your FB page url here"></div>

Anonymous,  December 5, 2013 at 6:01 AM    

yr a lifesaver Greenlava

Kirstyn December 10, 2013 at 2:58 AM    

I used a floating share bar from your site but am trying to remove it due to site updates. I was looking for the html coding so that I could search it in my template and erase it, but the html on this post doesn't match anything I have in my template. The widget links directly to your site, so I'm positive this is where I got it, and I didn't find any other posts that might have been the one. Did you used to have another floating share bar post, somewhere?

Greenlava December 12, 2013 at 9:32 PM    

@Kirstyn
I only see the Pinterest hover button in your template.

«Oldest ‹Older 401 – 410 of 410 Newer› Newest»
Click to go to top Click to comment