Add Floating Facebook Like and Retweet Counters To Your Websites

Since it is weekend so I thought lets  play with some CSS again. Facebook Like Button and retweet counter by tweetmeme are the two most widely used social media widgets without which you can’t call a blog a blog. Both these buttons along with Stumble Upon bookmarking button can let your readers circulate/share your tutorials and articles with their interested collegues and friends connected to them via these social networks. With a little HTML spiced with CSS we succeeded in creating a floating widget that will include these three buttons and will stay fixed at the middle lift side of your websites. The widget settings can surely be changed to align it to the right, bottom or left if you wish. You can also add more buttons to it if you wish like DIGG for instance.  See a demo first,

Live Demo

How To add Floating Facebook Like, Retweet and Stumble Upon Counter to Blogger?

1. Go To Blogger > Design
2. Select HTML/JavaScript Widget from anywhere (Position doesn’t matter)
3. Inside it paste the code below,

<div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px; width:53px ">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<iframe src="http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=true&amp;width=50&amp; action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowtransparency="true"></iframe>
</td>
</tr>

<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>

<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'mybloggertricks';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</td>
</tr>

</table>
</div>

     4.    Simply replace mybloggertricks with your twitter username.

     5.    Save your widget and you are Done!

See your blog to find a light and beautiful widget hanging at left side of your blog. Hope you like it! :)

Note:

I am facing some problem with the codes provided by facebook and tweetmeme because they don’t seem to work. If any one could provide me with the correct counter code then I will be more than thankful.

Thanks (mybloggertips)