Follow & Tweet Widget - Another jQuery Plugin

This plugin displays avatars of people who have recently followed your twitter account and tweeted your link. It would be useful when you have a new project launch and you need to encourage people to follow & tweet it by showing their Twitter avatars!

The plugin is a mix of two of my favorite plugins: Twitter Friends & Followers Widget and Twitter Trackbacks Widget. It first queries Topsy API to get tweeters and compares them with followers returned from Twitter API.

View these Demos..
Each demo page contains HTML & CSS & JS you need to use... Few CSS lines are needed, but will not focus on it here.

* If you don't see any avatars in these demos, you should:
1- Follow me
2- Tweet This Post

Demo 1►
By Default widget will fetch your latest 20 followers who tweeted your URL and append each Twitter avatar with a fade transition.
There are 2 essential options: the URL and the Twitter username, that should be placed in the options attribute of any Div element with class name as "follow-tweet".

<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://follow-tweet-widget.googlecode.com/files/jquery.follow_tweet-1.0.min.js"></script>

<div class="follow-tweet" options="{
   debug:1
   ,username:'mike_more'
   ,url:'http://www.moretechtips.net/2010/06/follow-tweet-widget-another-jquery.html'
}"></div>

Demo 2►
<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://follow-tweet-widget.googlecode.com/files/jquery.follow_tweet-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#friends').followTweet({
         debug:1
         ,username:'Mike_More'
         ,url:'http://www.moretechtips.net/2010/06/follow-tweet-widget-another-jquery.html'
         ,n:60
         ,user_animate:'width'
         ,friend_calls:2
         ,tweeter_calls:2
      });
   });
</script>

<div id="friends"></div>

This demo loads the plugin on document-ready event with few options changed:
- Used the 'width' for picture animation instead of default opacity animation.
- Changed the default users count to 60.
- Increased number of Twitter & Topsy API Calls to aggregate more users avatars.
* Over-increasing number of calls will delay the plugin output and may result that site-users being blocked by the API when rate limits for Twitter or Topsy get exceeded.

* Plugin was also tested to work with jQuery 1.4.2, Just replace jQuery Javascript path to "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

Widget Highlights:

1. Show your latest Twitter followers who tweeted your link.
2. It can work with friends instead of followers.
3. You can control number of API calls made to Twitter & Topsy to be able to show more avatars.
4. Instead of linking people avatars to their twitter page; You can link it to their home pages.
5. It can easily fit in different layouts by adjusting the number of avatars and its dimension.
6. Few transition options to apply to avatars like opacity, width, height.
7. Use a typical jQuery call on document ready or the plugin will auto-load any div elements that have "follow-tweet" class.
8. Widget adds a small "i" letter that links to the widget page. You can remove it by setting (info) option to empty string (''), but I'll appreciate it if you attribute/link-back to me elsewhere on your website.

Go to plugin page for more details on plugin options, request features or submit bugs.

Demo 1 | Demo 2 | Download Plugin | Plugin Options | Plugin Page

* Credits of inspiration go to Noura Yehia for motivating me to do this plugin.

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