Twitter Friends & Followers Widget - A jQuery Plugin!

There is a Facebook fans widget, Google friends widget, what about a Twitter friends widget?!
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.

By featuring your Twitter friends or followers on your blog, you will encourage others to become friends too..

Update Feb 20, 2012
A new version of this plugin is released! New version aims to be better looking and easier to setup.

View these Demos..

Demo 4 | Demo 3 | Demo 2 | Demo 1

Each demo page contains HTML & CSS & JS you need to use... CSS code is essential for this widget looking, but will not focus on it here.

Demo 1: Simple Followers List ►
By Default widget will fetch your latest 100 followers and append each picture of the 1st 20 of them with a fade transition, then the 2nd 20 pictures, then 3rd 20 and so on..

<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://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#friends').twitterFriends({
         debug:1
         ,username:'Mike_More'
      });
   });
</script>

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


Demo 2: Your Profile & Followers List ►
Now, to show your Twitter profile information -your picture, profile link, followers count- we will use the (header) option. which may contain any HTML code with these optional variables:
_tp_ : Twitter profile Link.
_ti_ : Twitter picture.
_fo_ : followers count.
_fr_ : friends count.
<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://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>

<div class="twitter-friends" options="{
   username:'Mike_More'
   ,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ Awesome Follwers!</h2>'
   ,user_animate:'width'
   ,users:50
   ,user_image:32
}"></div>
To install this widget:
1. Embed CSS code from demo page then include jQuery JS file and widget JS file.
2. Add a div with a "twitter-friends" class.
3. Don't forget to set (username) option with your Twitter username, which is the only essential option!

Also Note that:
- Unlike typcial JS call in demo 1, any Div's with a "twitter-friends" class will be automatically widgetized!
- any single quote (') inside the header value must be escaped with (\')
- Used the 'width' for picture animation instead of default fade animation.
- Changed the default visible users count to 50, Scaled down each pictures to 32x32, and the width of container so the 50 pictures would be divided into 4 rows equally.

Demo 3: Simple Friends List ►
As in demo 1 except (friends) option was set 1 to switch to friends mode.
You can see that widget is very flexible and can fit in different layouts.
<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://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>

<div class="twitter-friends" options="{
   friends:1
   ,username:'Mike_More'
}"></div>


Demo 4: Your Profile & Friends & Friends Tweets ►
Another optional part in this widget is Friends tweets. after friends pictures were added, their latest tweets will start animate one after another. when you enable tweets by setting (tweet) option to 1 each friend icon will also show his/her tweet as a tooltip.
<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://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>

<div class="twitter-friends" options="{
   username:'Mike_More'
   ,friends:1
   ,tweet:1
   ,header:'<a href=\'_tp_\' title=\'follow me\'><img src=\'_ti_\'/></a><h2>_fr_ Friends / _fo_ Followers</h2>'
   ,loop:1
   ,users:50
   ,user_animate:'height'
}"></div>
you can also see that we used the (header) option to show number of Friends & Followers.
and (loop) option was set to 1 to loop users pictures animation.

Widget Highlights:

1. Show your latest Twitter Friends and Followers with custom animation.
2. With your own words; Display your profile and total count of your friends and followers.
3. Display your friends or followers latest tweets.
4. Instead of linking a picture to friend's twitter page; You can link it to his/her home page. So, They would know that your are linking to them (by referrals).
5. Don't worry about your SEO with the quality of all these outbound links as they are loaded by Javascript and wouldn't be visible to a search engine crawler.
6. Widget is very flexible and can easily fit in different layouts by adjusting the number of visible pictures and its dimension.
7. Many pictures & tweets transition options like opacity, width, height.
8. Each part of the tweet like Avatar, links, Hashtags.. has its own CSS class so it can be styled easily.
9. Show or hide some parts of the tweet like avatar, author name, date, etc...
10. Use a typical JS call or auto-load div elements that have "twitter-friends" class.
11. 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 | Demo 3 | Demo 4 | Download Plugin | Plugin Options | Plugin Page

Tags: hot , javascript , jQuery , jQuery Plugin , RESTful , twitter