Wednesday, 7 September 2011

Adding Floating Social Media Sharing Buttons To Blogger

As promised to some of my readers, here’s a tutorial on how to add a Mash able-like floating bar of social media buttons to a Blogger 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, Retweet, Stumble, Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer, of course). You can add more social bookmarking or sharing buttons later if you wish.
  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget
  3. Paste the following code inside it,  
<!-- floating page sharers Start>

<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;}


<div id='pageshare' title="Get this from">

<div class='sbutton' id='fb'>

<a name="fb_share" type="box_count" href="">Share</a><script src="" type="text/javascript"></script>


<div class='sbutton' id='rt'>

<script src="" type='text/javascript'></script>


<div class='sbutton' id='su'>

<script src=""></script>


<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='' type='text/javascript'></script>

<a class="DiggThisButton DiggMedium"></a>


<div class='sbutton' id='gplusone'>

<script type="text/javascript" src=""></script>

<g:plusone size="tall"></g:plusone>


<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="">widget</a></div><!-- Do not remove this link -->


<!-- floating page sharers End -->

    4.   Now finally Click the save button at the top right corner and you are all done!

View your blog to see it hanging just to the left of your blog post body.

No comments:

Post a Comment