Who-Tweet Button : Fancy jQuery Plugin for Twitter

I took the Topsy retweet button and jQuery-fied it, then added the "Who" part to it using the awesome Topsy API. to create this fancy share count button for your stories on twitter. that's it!

The Who part is about attributing the people who tweet your story by showing their Twitter pictures inside the retweet button. Topsy  keeps a complete history about Twitter trackbacks of your links which I utilized in another jQuery plugin and inspired me with this idea.

Now Check out these DEMOS..

Demo 1 | Demo 2

Demo 1: Basic ►
Just, Include plugin CSS, jQuery library and plugin JS. then, add a div with a "who-tweet" class and the button will auto. attached to it.

<!-- Include CSS and JS once in your page -->
<link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- Include CSS and JS :end -->

<!-- Required HTML -->
<div class="who-tweet" options="{
   nick:'Mike_More'
}">loading..</div>
<!-- Required HTML :end -->
Although all arguments are optional. It is better to set your own Twitter nickname (username), So when people retweet your link; your nickname appears as the source.
Link URL will be automatically grabbed from the page this code is placed in.
* You can see that Topsy badges that link as "Top 1K". What are Top Links?

Demo 2: Advanced ►
This time will use a typical Javascript call to attach the button to the selected element(s).. After we include Plugin CSS, jQuery library and plugin JS as before.
<!-- Include CSS and JS once in your page -->
<link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- Include CSS and JS :end -->

<!-- Attach button -->
<script type="text/javascript">
$(document).ready(function(){
   $('div.who-tweet-2').whoTweet({
      nick:'Mike_More'
      ,url:'http://www.moretechtips.net/2009/11/twitter-trackbacks-widget-jquery-plugin.html'
      ,n:20
      ,inf_only:1
      ,inf_tip:1
      ,tweet_tip:1
      ,animate:'height'
   });
});
</script>
<!-- Attach button :end -->

<!-- Required HTML -->
<div class="who-tweet-2">loading..</div>
<!-- Required HTML :end -->

few options were changed here:

• 'url' is manually set. You can see that this time the link has no special Topsy badge for top stories.
• Changed number of pictures to show 'n' to 20.
• Set 'inf_only' to 1 to get pictures from influential tweeters only.
• Set 'inf_tip' to 1 to show people's influence level as a tool tip.
• Set 'tweet_tip' to 1 to show people's tweets as tool tips.
• Animating picture height instead of the default opacity animation.

Features:

1. Display Twitter pictures of people who tweet your link.
2. You can show pictures of highly influential users only.
3. Display people tweets as a tool-tip when hovering over their pictures.
4. Many transition options like opacity, height and width.
5. The button is not Iframe-Based. Which means you can easily customize its style to blend into your theme.
6. The button makes use of jQuery DOM-Manipulation (No document.write) for better and optimal integration with your code.
7. Use a typical JS call or auto-load any number of div elements that have "who-tweet" class.
8. Still, you can display the original retweet buttons -tall or wide- without the Who part.

Project | Plugin Options | Download plugin JS| Demo 1 | Demo 2

Now, it is time for your feedback.. is it fancy or not :)

Tags: hot , javascript , jQuery , jQuery Plugin , topsy , twitter , Web 2.0