Monday, 28 November 2011

How-to: Add Floating Social Media Buttons to Blogger

This may be leaping on a bandwagon, but I've been updating the blog and have added an extra layer of social media sharing. It seems everyone is using floating social buttons in the left side or right side of the page of every site or blog. I blame Mashable.

I've used a bit of common code to add a bar of social media buttons to Blogger. The bar is actually the bit that's fixed in place on screen while the rest of the page scrolls, but what's in a description?

The Social Media bar here includes Facebook Share, Twitter,   Digg This and Google +1 (plus one) buttons with a live counters. It's all javascript, of course, with some cunning CSS that's fairly robust and cross-browser (I think!)


How to add it?
  • Login to your Blogger account.
  • Go to Layout
    Select Add A Gadget anywhere in your layout - preferably somewhere non-critical for positioning in your layout. The Gadget won't show up in the page body, but don't count on unexpected mis-alignment of page elements; not all templates are equally well crafted.
  • In the Add A Gadget selection window, select HTML/Javascript as the gadget type.
  • Copy the code below and paste it into the content box.
  • Save the Gadget, save the layout.
Done. RC

<!-- floating page sharers Start -->
<style>
#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 CatlingMindSwipe.blogspot.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='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="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://CatlingMindSwipe.blogspot.com">Get this</a></div>
</div>
<!-- floating page sharers End -->