-->

Cool ?

Thursday, October 27, 2011

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


Why You must add This?

Floating social media widget 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

33 comments:

  1. You are welcome!
    Yea try it and don't forget to tell me what you got!

    ReplyDelete
  2. nice widget I have add it to my blog.
    ( http://www.computertricks77.tk/ )

    It is realy nice

    ReplyDelete
  3. @Pasindu....

    Yea.. I saw it. hope it'll be very effective for you!

    ReplyDelete
  4. I love the idea of putting this floating bookmarking widgets in my blog. Thanks for sharing your thoughts about this one. I really love the simplicity of the widgets.

    ReplyDelete
  5. This is a great article, and a great topic to explore. Thanks for sharing.

    ReplyDelete
  6. It works , Thanks Chathura for sharing it.

    ReplyDelete
  7. Its look like too complicated...do you have the blogger plugin way

    ReplyDelete
  8. Good article. I've installed my button already and getting Plus Ones already. My favorite site to get free Plus Ones is GetPlusOnesEasy.com. It's a free Plus One exchange that's easy and fast. http://GetPlusOnesEasy.com

    ReplyDelete
    Replies
    1. Hmm... I'll try out your service! thanks for sharing!

      Delete
  9. I've tried this one on my blog and it works perfectly. I look forward to seeing new more widgets from you. Thanks for sharing this one!

    ReplyDelete
  10. Is there any way for a visitor to block this? I and many others find it annoying.

    ReplyDelete
  11. I installed, working successfully, when i open my blog (http://cooktodine.blogspot.com/ with different browsers it appear in different positions, is there any solution to show in a default position if blog opened in any browsers.
    IE and Google chrome show in right position( I defined this position)
    Firefox and Opera show in center. I want this plugin to show in single position please help me

    ReplyDelete
  12. thanks for sharing matching perfect with blog theme

    ReplyDelete
  13. hi admin... it is not working on my blog can you tell me the problem i have placed the code in html/javascript
    http://sdhacks.blogspot.com

    ReplyDelete
  14. How does the google plus work on a wordpress blog. I'm not sure where to put that line of code? Thanks

    ReplyDelete
    Replies
    1. If you are asking about this code, <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>




      Log in to your wordpress dashboard and go to
      Appearance >> Editor >> Header.php
      put the code in the opened text box (Be careful and do not put the code within another code.

      Delete
  15. thank you so much for this one.
    i had another one but the tweet was not working, something to do with tweetmeme
    how would i be able to get rid of the gray line border? i don't want a border, just all white.
    thank you!!!

    ReplyDelete
    Replies
    1. Yea for sure!
      You can find out how at right under the "How to edit this" header. Just change the #ddd in to #ffffff.

      Delete
  16. @darius me neisthe...can someone help us :(

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Thanks for sharing, I want to try it..
    very cool

    ReplyDelete
  19. The Idea of having these widgets is like adding your leverage in your site.. The complex value of social media becomes more powerful and reliable.. People who share information through social media are quite considered as recommendation by real humans and not bots..

    ReplyDelete
  20. Its work , Thanks for sharing it.

    ReplyDelete
  21. i'm not found
    in my edit html..icant change the setting.please help me.i'm new blogger....

    ReplyDelete
    Replies
    1. Log in to your Blogger account and select your blog. Then Go to, Template >> Edit HTML

      Delete
  22. thanx..now i can use that float box in my blog..it looks cool..could u visit my blog and comment something about my blog.i really appreciate it: http://adhachem.blogspot.com/

    ReplyDelete
  23. Thank you , I have add this plugin on my website http://softneo.com and it's great. Thank You again.

    ReplyDelete
  24. Thanks for sharing this post about SEO plugins. I think these are the best way to drive traffic on your websites and will increase your chances to improve your search engine rankings.

    seo outsourcing company

    ReplyDelete
  25. It's thoroughly disgusting from a reader's point of view. It hangs there blocking the text and there is no obvious way to remove it. It is causing me to leave blogs that have it rather than be annoyed by having to read around it. I'm generally a level headed, calm, patient guy, but this sort of floating box that can't easily be turned off really pisses me off.

    ReplyDelete
  26. You are doing a good job! This is really an interesting blog......Thanks for sharing with us.

    ReplyDelete

x

Please Use 10 seconds to Make Us World Wide

A Pluse One will be a great support...
...........................................................................



Also a Like on the Facebook Page
...........................................................................



Get This