Floating Stumbleupon, Digg, Twitter, Plus One and Facebook Share button with counters

Why You must add This?

Digg And plus One are Social bookmarking sites. So with Digg, you can become top of the search engine results for the keywords That you can't get with your blog. because Digg has a top PR.when many people suggest your blog by digging, It will be on top.
Plus one is another Important thing to suggest your blog to others, specially It's a Google program. That's why this become so important.when you get more +1s it means your page that contains them will be suggest to others by Google.
When talking about Facebook Share button. I think i don't have to describe about it. It's so important to get more visitors (Traffic) Twitter is same.

Why its floating ?

It's floating because readers will get it easily. If you have added buttons to the top of the page, readers won't click them because they haven't read the article yet.Also if it's in bottom your readers will in a hurry to check your post out or to get rid of the blog (If it's boring).

How to add This

First copy the following code.

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

Then place the code as a "HTML/Java Script" Widget in your blog.

Note: If you haven't used +1 button before, you have to put this code just above the </head> tag.

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

Now you are done.

How to edit this.

Sometimes. The widget will be miss placed. It depend on your blog width. So you can move it Horizontally by changing the value of "70px"

Change this colors to match with your blog.

1. Background »     ":#fff"
2.Border»     "#ddd"

Also change "CCrazyStream" to your twitter username.

You can make this widget only appear in posts. by simple making this change.
First, go to. Template » Edit HTML

and search for your widget ID or Title, then you will find something like this

<b:widget id=WIDGET-ID' locked='false' title='WIDGET-TITLE'  type='HTML'>
<b:includable id='main'>
(widget code will be here)
</b:includable> </b:widget>

Then make this changes on it.

<b:widget id=WIDGET-ID' locked='false' title='WIDGET-TITLE'  type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

(widget code will be here)

</b:if>

</b:includable> </b:widget>

Update

New Stumbleupon button Added! I didn't add it before because of the button style isn't fit with others. But, It's a Important one with building traffic...... If you already using the widget please replace the code with new one!

---

I think you will enjoy!

---

If you have any suggestion or a question about this post, don't forget to ask them in a comment

And if you need to modify this to fit with your blog. just make a request in a comment.



Incoming search terms: facebook stumbleupon digg sharing, Floating Counters, floating sharing counter widgets for websites, flying twitter, facebook digg twitter, social media sharing options floating widget, fixed floating twitter and facebook share buttons, floating share widget

Subscribe to Get Latest Posts in your Inbox