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..
View these Demos..
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:
- Show your latest Twitter Friends and Followers with custom animation.
- With your own words; Display your profile and total count of your friends and followers.
- Display your friends or followers latest tweets.
- 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).
- 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.
- Widget is very flexible and can easily fit in different layouts by adjusting the number of visible pictures and its dimension.
- Many pictures & tweets transition options like opacity, width, height.
- Each part of the tweet like Avatar, links, Hashtags.. has its own CSS class so it can be styled easily.
- Show or hide some parts of the tweet like avatar, author name, date, etc...
- Use a typical JS call or auto-load div elements that have "twitter-friends" class.
- 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.





This looks just like TweetPeep that came out a couple of months back.
http://www.hpoom.co.uk/projects/tweetpeep/
@Simon,
Sorry, I don't see how..
I didn't see that Tweetpeep plugin before, It looks very interesting. It is defined as:
"TweetPeep is a jQuery plugin to allow people to have an area in their page wallpapered with twitter profile images of people who are talking about a common subject or word".
But this plugin is a Twitter friends widget!
Hey, nice to see my picture in your top image ;) Expect a tech tweet soon ;)
@Elijah,
Thanks for the comment and tweet.. Your picture had to be there :)
Mike & Simon, thanks for educating to the existence of both of these plugins. I'm primarily an ASP.NET guy doing a mix of biz-apps and social network biz-aaps, who started drinking the jQuery juice over the summer, and loving it. I can definitely see uses for both plugins, thanks again.
@Andrew,
you welcome :)
does this work in a hosted wordpress blog? I've tried it (with a thesis theme), but just does 50 twitter icons down and 1 wide? Any ideas why?
Thanks.
@Anonymous,
It should work anywhere.. but what do you mean by "just does 50 twitter icons down and 1 wide"?
It would be better if you can email me with more details and your blog link.
@Anonymous,
That happens when you forget to copy the CSS over. View the document source of the example and you'll see the other necessary code.
Thanks for the plugin. Worked perfectly right off the bat. :)
@Anonymous,
great.. thanks for your feedback!
This plugin is attracting many people that are called 'Anonymous' :)
Hello Mike, this is by far the best twitter widget developed so far - simply Fantabulous ! :)
Wishing you much continued future success within your career & life endeavors .
M.
@Mia,
Thanks for the kind words and the RT :)
Wish you too a successful life and blogging.
nice post about twitter widget, im just a newbie, and i just little know about twitter and facebook, thanx :D
Thanks for the jQuery plugin. Its a good app to be used both on facebook and twitter. Thanks the great post on the topic.
Looks great in Chrome, but it won't work for me in latest FF.
@Anonymous,
I don't see any problems in the demos, can you give me more details:
What FF version exactly?
Which Demo?
Do you see errors on FF error console?
Is Twitter.com itself is down?
Should you email me for better help?
Brilliant absolutely brilliant!!!