Add Any Share Button to Floating Share Widget

Share your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic.So today I'm going to show how to add any share button to floting share widget.Users can share your blog easily by this widget and it add some beauty to your blog.Twitter,stumbleupon,digg,facebook,google plus are the common share buttons in this floting widget.I will show how to add any share button you want to this widget.First add the common floting widget with twiitter,facebook,stumbleupon,digg, and google plus buttons.Follow these steps.

First log in to your account and go to Design  

Then click on add widget and select html/javascript

<style>


#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="CCrazyStream">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;">



<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>

<tr>
<td style=" padding:5px 0px 2px 0px;">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</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.blogtrickstream.com/2011/09/floating-digg-twitter-plus-one-and.html">Get This</a></p>

    </td>
    </tr>
    </table>
</div>
</div>

Now save it.Now look at your blog you have add the floting widget with common share buttons.


How to add more share buttons.


Add these codes after any </tr> tag in the above code


Linkedin button

<tr>
<td style=" padding:5px 0px 2px 0px;">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
</td>
</tr>

Reddit button

<tr>
<td style=" padding:5px 0px 2px 0px;">
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>
</td>
</tr>

If you want add any more buttons.Lets follow these steps.


<tr>
<td style=" padding:5px 0px 2px 0px;">
Paste the codes of any button you want
</td>
</tr>


You can find the button codes easily by search in google like this


type the social bookmarking/networking site button


example:- facebook button
digg button

After you found the button codes you have to customize the size of them by changing value of width & height.Otherwise some buttons will not fit to the floating widget.If you can't do this put a comment.I will do it for you.

Posted in: Blogging