How to Add Floating Facebook Share & +1 Button Next To Posts in Blogger

As time goes by, a lot of scripter/programmer made up a good script. This script will enable you to show-up the floating facebook share, etc...

As time goes by, a lot of scripter/programmer made up a good script. This script will enable you to show-up the floating facebook share, etc just beside of your blog content.

See above picture for an example that I've taken from http://facebookholic.blogspot.com (As the founder contact me and ask for a floating script)

How to Add Floating Facebook Share & +1 Button Next to Posts in Blogger??

1. Go to Dashboard > Design
2. Choose a "HTML/JavaScript Widget"
3. Simply paste the following code inside it,

<style>  

 #floatdiv {  

  position:fixed;  

  bottom:15%;  

  margin-left:-180px;  

  z-index:10;  

  float:left;  

  padding-bottom:2px; 

 }  

 #mbtsidebar {  

  background:#fff;  

  border-top:1px solid #ddd;  

  border-left:1px solid #ddd;  

  border-bottom:1px solid #ddd;  

  border-radius:5px;  

  -moz-border-radius:5px;  

  -webkit-border-radius:5px;  

  padding-left:5px;  

  width:60px;  

  margin:0 0 0 5px; 

 } 

 .fb_share_count_top {width:52px !important;}  

 .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  

 .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !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="floatdiv">

 <div id="mbtsidebar">

  <table cellpadding="1px" cellspacing="0">

   <tr>

    <td style="padding:5px 0px 0px 0;">

     <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ScripterZone">Tweet</a>

     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </td>

   </tr>

   <tr>

    <td style="padding:5px 0 2px 0;">

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

    </td>

   </tr>

   <tr>

    <td style=" padding:5px 0px 0px 0px;">

     <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

     <g:plusone size="Tall" expr:href="data:post.url"></g:plusone>

    </td>

   </tr>

   <tr>

    <td>

     <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://scripterzone.blogspot.com">Widgets</a></p>

    </td>

   </tr>

  </table>

 </div>

</div>

3.1 Easy Customisation

1. margin-left:-180px;

To align the widget more towards the left or right then edit this value. Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.

2. background:#fff;

To Change the background colour of the floating widget then change the background value (E.g: #fff is for white, means that, your background widget will be white in colour.)

4. Save your widget and drag it just below the post body as shown below,

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