Sep 11, 2011

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

I have ever posted about how to put social bookmark sharer button, that's sharing is sexy button. I also have posted about how to put our social media icon to help your reader close and know more about you. A hour ago, I was looking for simple sharer button, I only need Facebook sharer, Tweet button, and the new one +1 button from Google. Fortunately, I find a easy tutorial about how to add floating social bookmark button next to post in Blogger from MyBloggerTricks. Really thanks to you, the author.

You can see this sticky widget to left of my blog, both on homepage and postpage. The installation process is so easy. Here I share how to add floating Facebook Share,Tweet, +1 Button in Blogger.

  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget
  3. Paste the following code inside it
  4. <style>
    /*-------MBT Floating Sharing Widget------------*/

    #floatdiv {
      position:fixed;
    bottom:15%;
    margin-left:-70px;
    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="mybloggertricks">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://www.mybloggertricks.com">Widgets</a></p>
        </td>
        </tr>
        </table>
    </div>
    </div>

     

  5. Save your widget and drag it just below the post body as shown below
  6. Finally click the save button at the top right corner and done

Any question or complete customization, you can go to author website.

20 comments:

  1. Hi, why my posting become like the one in this picture? http://bit.ly/rj4ZVY

    ReplyDelete
  2. Here is the picture...check the link..thanks..
    http://bit.ly/pB22eA

    ReplyDelete
  3. I was searching since long and I got finally, thanks a lot for sharing.

    ReplyDelete
  4. really nice.Looks cool
    I have been searching it for long time.Thanks

    ReplyDelete
  5. nice info...
    i'd tried but where and how to put my facebook link in this HTML?

    thanks

    ReplyDelete
  6. Wow, Great post,Nice work, I would like to read your blog every day Thanks.

    ReplyDelete
  7. it is impressively easy to add a widget with those options that blogger has. Even for those that you have to add a code on it and thanks for the tutorial.

    ReplyDelete
  8. Coach outlet online Leading American designer and maker of luxury lifestyle handbags and accessories.Large market in Europe and Canada,UK,USA etc.Welcome to Order!2011 New Style arrive,Free Shipping!

    ReplyDelete
  9. for the other reason, this one of i looking for.. nice posting.. ban terbaik di Indonesia gt radial

    ReplyDelete
  10. “Luxury, fashion and art are both expressions of emotion and passion; they search the

    exceptional and give us an alternative view of the world. Art inspires fashion and luxury,

    as luxury and fashion inspires art, Coach Factory Outlet."

    ReplyDelete
  11. So cute & thanks!!U make my blog much cooler and beautiful!! hope there's more!!

    ReplyDelete
  12. in the Coach Outlet role of impotent bystander,among the 17 countries that use the euro,matter what happens at the European summit meeting on.

    ReplyDelete
  13. In the post has been define the about face book and how to add floating so that can be able to understand and know that regarding post.

    ReplyDelete
  14. Its really a nice article. It has good content. Thanks for sharing it.

    ReplyDelete
  15. I really loved reading your blog. It was very well authored and easy to understand. Unlike additional blogs I have read which are really not good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he enjoyed it as well!

    ReplyDelete
  16. Those people are very like it and enjoy it in this post.It is useful so that can be used in this technology.

    ReplyDelete
  17. Thanks a lot for the Post!! I Already added it!!

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008