skip to main | skip to sidebar

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..

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=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">

<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=""></script>
<script type="text/javascript" src=""></script>

<div class="twitter-friends" options="{
   ,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ Awesome Follwers!</h2>'

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=""></script>
<script type="text/javascript" src=""></script>

<div class="twitter-friends" options="{

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=""></script>
<script type="text/javascript" src=""></script>

<div class="twitter-friends" options="{
   ,header:'<a href=\'_tp_\' title=\'follow me\'><img src=\'_ti_\'/></a><h2>_fr_ Friends / _fo_ Followers</h2>'

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.


  1. Simon Wood // October 23, 2009 at 12:13:00 AM GMT+11  

    This looks just like TweetPeep that came out a couple of months back.

  2. Mike // October 23, 2009 at 3:10:00 AM GMT+11  

    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!

  3. Elijah Manor // October 24, 2009 at 3:58:00 AM GMT+11  

    Hey, nice to see my picture in your top image ;) Expect a tech tweet soon ;)

  4. Mike // October 24, 2009 at 10:29:00 AM GMT+11  

    Thanks for the comment and tweet.. Your picture had to be there :)

  5. Andrew Badera // October 29, 2009 at 8:26:00 PM GMT+11  

    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.

  6. Mike // October 30, 2009 at 12:21:00 AM GMT+11  

    you welcome :)

  7. Anonymous // November 4, 2009 at 4:11:00 AM GMT+11  

    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?


  8. Mike // November 4, 2009 at 5:44:00 AM GMT+11  

    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.

  9. Anonymous // November 4, 2009 at 10:53:00 AM GMT+11  

    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.

  10. Anonymous // November 6, 2009 at 6:57:00 AM GMT+11  

    Thanks for the plugin. Worked perfectly right off the bat. :)

  11. Mike // November 6, 2009 at 9:58:00 AM GMT+11  

    great.. thanks for your feedback!
    This plugin is attracting many people that are called 'Anonymous' :)

  12. Mia // November 14, 2009 at 10:40:00 AM GMT+11  

    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 .


  13. Mike // November 14, 2009 at 11:14:00 AM GMT+11  

    Thanks for the kind words and the RT :)
    Wish you too a successful life and blogging.

  14. Beauty // November 26, 2009 at 8:33:00 PM GMT+11  

    nice post about twitter widget, im just a newbie, and i just little know about twitter and facebook, thanx :D

  15. nintendo dsi r4 // December 4, 2009 at 9:22:00 PM GMT+11  

    Thanks for the jQuery plugin. Its a good app to be used both on facebook and twitter. Thanks the great post on the topic.

  16. Anonymous // December 9, 2009 at 3:32:00 AM GMT+11  

    Looks great in Chrome, but it won't work for me in latest FF.

  17. Mike // December 9, 2009 at 11:28:00 AM GMT+11  

    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 itself is down?
    Should you email me for better help?

  18. Anonymous // December 15, 2009 at 10:53:00 PM GMT+11  

    Brilliant absolutely brilliant!!!

  19. yves costiou // February 17, 2010 at 11:42:00 AM GMT+11  

    Hy ! i've written an extension for the CMS Spip based on your plugin. it works good ans the simplicity of use of your plugin allows a fast integration in this CMS. You can see the result here (

    Thanks a lot for your great job ! (and sorry for my english)

  20. Mike // February 17, 2010 at 12:51:00 PM GMT+11  

    No, Thank you for the attribution. I really appreciate it :)
    I didn't hear about SPIP but now I gonna take a deeper look..
    Your English is "très bien".

  21. LunaLuna // February 24, 2010 at 3:37:00 PM GMT+11  

    Hi Mike. I am new to Twitter and Blogging and trying to setup the official Twitter widget, just like the one on this site. I embedded it fine and it's working properly, I think... but one problem: it doesn't display my followers tweets inside the box so it looks like I'm just talking to myself. Anyway I can fix this or any suggestion for a different widget? Just to be clear, I don't care about showing off my Followers avatars, I just want to have a comment box that displays both my tweets and my followers. Thanks a lot!

  22. Mike // February 25, 2010 at 2:15:00 PM GMT+11  

    I think this is what you need:

  23. sony // April 16, 2010 at 4:56:00 AM GMT+10  

    thats a nice post,thank you

  24. @GRBlog ( ) // May 2, 2010 at 4:31:00 PM GMT+10  

    Awesome plugin !!! Love it !!!
    Now, I want a "target blank" link in pictures :P
    How do it ??

  25. Kevin // May 5, 2010 at 7:37:00 AM GMT+10  

    Im trying to get it to display all my followers... it seems to reach 97 then stop... any ideas?

  26. shakime // May 7, 2010 at 9:38:00 AM GMT+10  

    im so sorry, but ive been reading this page for about 3 hours now,over and over again, but i still cant put the widget on my blog,

    for the DEMO 1, when i paste the code, everything works fine, but when i tried the other , it wont work,

    i really like to put the DEMO 2 and DEMO 4, please help me with this problem..

  27. Mike // May 7, 2010 at 10:02:00 AM GMT+10  

    Email me your URL to better help you.

  28. Mike // May 7, 2010 at 10:03:00 AM GMT+10  

    I see.. this is weird!

  29. Nikunj Tamboli // June 7, 2010 at 3:25:00 PM GMT+10  

    Really helpful post, the best way to show your twitter friends on your website.

  30. Anonymous // June 9, 2010 at 6:30:00 PM GMT+10  

    I have the same problem of shakime, the script shows 20 followers at a time for 5 times (in total 100 followers), then start again without showing the remaining followers.

    I hope you can find a solution, in the meanwhile, thank you great work!


  31. Anonymous // June 11, 2010 at 1:25:00 AM GMT+10  

    Sorry, I was referring to the issue of Kevin not shakime.

    However I noticed in your Demo 1 that the number of followers will stop at 100, so I would say that there is definitely a problem with the maximum number of followers.

    Would be nice if you could fix this problem :)


  32. Anonymous // June 22, 2010 at 2:16:00 AM GMT+10  

    Hi mike,

    is it possible to get the user names instead the images?

  33. thinchhia // June 28, 2010 at 4:05:00 AM GMT+10  

    is this widget compatible for blogspot user? will you show me how to use for my blog

  34. Mike // June 28, 2010 at 4:13:00 AM GMT+10  

    Yes, it is pure JavaScript. go to Blogger > design > Page elements > add HTML/javascript widget somewhere and set its content with code as in demo 1...

  35. thinchhia // June 28, 2010 at 4:23:00 AM GMT+10  

    thanks i did it!! thank you

  36. michael // June 28, 2010 at 11:48:00 PM GMT+10  

    Hi Mike, no answer to my questions ?

    There is a way to display all the followers and not only the last 100 ?

    Thank you

  37. Mike // June 29, 2010 at 8:43:00 AM GMT+10  

    Te result set isn't guaranteed to be 100 every time as suspended users will be filtered out.

    It is not a problem, the plugin was designed to get your latest 100 friends only.. I'll try changing that in next version.

  38. michael // June 29, 2010 at 10:41:00 AM GMT+10  

    Thanks for your answer!

    I will wait the next version.

  39. Drunk Bowling // July 15, 2010 at 4:59:00 PM GMT+10  

    Thank you for this amazing widget!

    Any chance we could get a randomized output of followers? Also, wondering if we could return live search query results instead of just things your followers have said.. Lastly, while it's displaying each batch of followers could there be a way to not have it clear the row but simply have like an update "overlap" the previous?

  40. Jennifer Stock // August 7, 2010 at 5:54:00 AM GMT+10  

    This is another request for the widget to display more than the last 100 followers. Would like an option to display all followers.

    Thanks, we really enjoy this plugin!

  41. glenda // September 15, 2010 at 4:23:00 AM GMT+10  

    I have added this to my site but it asks new users to login to the twitter API. I assume I need to authorise the application somehow with twitter. Does anyone know how to do this ?

  42. Mike // September 15, 2010 at 6:33:00 AM GMT+10  

    Can you post/email me a demo link?
    Your Twitter account is private?

  43. Kimmy // September 29, 2010 at 1:56:00 AM GMT+10  

    Hi there -- I added your widget to our page, but it list all followers in a single line instead of box format - am I doing something wrong? page is at Thanks! Kimmy

  44. Mike // September 29, 2010 at 8:32:00 AM GMT+10  

    You welcome..
    You need to add CSS code from demo page that is marked as "<!-- Required CSS -->"

  45. Kimmy // September 29, 2010 at 9:52:00 AM GMT+10  

    @Mike - I've added the code at the top of the sidebar page, before the widget, everywhere! Still can't get it to work :(

  46. Mike // September 29, 2010 at 6:54:00 PM GMT+10  

    You've removed the widget from you site?
    Plz, email me for further assistance.

  47. // October 6, 2010 at 8:28:00 PM GMT+11  

    Thanks. Love it. Just what I wanted!

    Brian Quilty

  48. WayneM // November 9, 2010 at 3:38:00 AM GMT+11  

    Great widget!
    Fantastic options and easy to style/customize.

    If add this to my website that gets a fair amount of traffic, will there be any problems with too many hits to the Twitter API, or anything like that? Does the script cache data, or get new data on each call?

    Thanks :-)

  49. Mike // November 9, 2010 at 10:15:00 AM GMT+11  

    Hi WayneM,
    Thanks for your feedback :)
    Twitter uses IP-based rate limiting. So, too many hits blocks the user not your site..
    No caching is used.

  50. WayneM // November 10, 2010 at 6:13:00 AM GMT+11  

    Thanks for your last reply - that's good to know. I think I hit the limit last night while testing various styling :-)

    Another question:
    Maybe I misunderstand the "user_append" option. I set it up with the default "1", and that works. Changing it to "0" does not seem to have any effect. I was hoping to have the followers display in reverse order - so the newest follower shows first. I only display a limited number of followers (6, for now) - no looping, no animation. So, it's just showing the same followers in the same order. Is there a way to have it display the newest follower first?

  51. Mike // November 11, 2010 at 11:27:00 AM GMT+11  

    Setting 'user_append' = 0 to insert user pictures at the beginning of pictures list.
    There is no way to display newest first, will change that in newer version!

  52. Nelson // November 17, 2010 at 1:55:00 PM GMT+11  

    Awesome plugin! I am using it on a site for the "follower's tweets" feature and its great, but for some reason the same few tweets from the same few people keep looping, even tho there are newer tweets out there from different people. Is there any way to force the plugin into refreshing every few seconds?

    Thanks in advance for the code =D

  53. Mike // November 17, 2010 at 9:30:00 PM GMT+11  

    Thanks @Nelson,
    Twitter returns friends list plus the last tweet for each one.. and that's ok cause friends list is the main concern here..
    May be in future version will query the timeline of each friend.

  54. Kennedy // January 3, 2011 at 8:52:00 PM GMT+11  

    Here is a question for you... I am using a microblogging system simpliar to twitter which uses the OAUTH as twitter, would I be able to use this script for my mircoblogging software with some minor changes?

  55. Mike // January 4, 2011 at 10:50:00 AM GMT+11  

    it depends on the API of that Micro-blogging software, I need more details..

  56. Dimka // January 13, 2011 at 12:08:00 AM GMT+11  

    hanks for sharing! very much it was useful

  57. Heather // January 28, 2011 at 2:10:00 PM GMT+11  

    Great plugin and instructions. Thanks so much :)

  58. Heather // January 28, 2011 at 2:44:00 PM GMT+11  

    Hi again - on the top right corner of demo 2, there is a grey ".i" showing up in your sample and on my page where I posted your code.
    What is this and how do I get rid of it?

  59. Tiffany Israel // March 12, 2011 at 11:06:00 AM GMT+11  

    @Heather: Add the following...


    just after where you entered the username that will get rid of the i

  60. Unknown // April 9, 2011 at 2:00:00 AM GMT+10  

    Hi there - I have copied your code exactly from Demo 1, but it's not working - even though I haven't changed anything. Please could you point me in the right direction? My link is here:

  61. Mike // April 9, 2011 at 8:09:00 AM GMT+10  

    Hi @Berecca,
    The link looks fine to me, if you need further assistance email me..

  62. Snack Money // May 4, 2011 at 8:56:00 AM GMT+10  

    Thankyou very much for this excellent tool!
    Congrats, you also made it onto !

  63. Mike // May 4, 2011 at 5:57:00 PM GMT+10  

    @Snack Money,
    Thanks for featuring my plugin on your website, much appreciated :)

  64. Skip // June 9, 2011 at 5:43:00 PM GMT+10  

    Hi Mike,

    The plugin has suddenly stopped working across all my browsers. Shows number of followers but not their faces. Has something changed at Twitter or is it a temporary glitch? The demos on here have also stopped working for me. Anyone else having the same problem?

  65. Mike // June 10, 2011 at 3:26:00 AM GMT+10  

    thanks for the heads up.. I fixed that error caused by changes in Twitter API..
    Please note that this fix might take few minutes because of the caching by Google code hosting.

    If you use a copy of the plugin file then please use the updated version [jquery.twitter-friends-1.0.min.js].

  66. Anonymous // June 10, 2011 at 4:21:00 AM GMT+10  

    hi Mike, your work is awesome! but unfortunately after waiting quite some time, neither fetching the js from google or linking directly to the file works, just happened last night and have been keeping an eye on the blog to make sure I update the widget correctly. thanks!

  67. Mike // June 10, 2011 at 8:56:00 AM GMT+10  

    If you still have the old plugin file loaded, try this trick to force Google code to return the fresh copy. append any random query parameter to the plugin url like this
    <script type="text/javascript" src=""></script>

  68. Anonymous // June 10, 2011 at 9:37:00 AM GMT+10  

    mike I have no idea where I am botching it, the code is exactly the same as before, friends div, css, etc. I tried get google to reload, I linked to it locally, the only thing I can think of is the jquery I am pulling from google is 1.4.4 not the version you have in your demos. Does so many sites testing out ipv6 have anything to do with it, cause I just can't see anything from the country where I live.
    Whether or not I can get this going again, just want you to know how important people like you are to many of us who can't seem to get past html and css, we can play around with basic php and JS, but it's you guys who make life so much better!!

  69. Mike // June 10, 2011 at 7:50:00 PM GMT+10  

    plz, check the trick I mentioned in my last comment about adding a random query parameter to the plugin URL..

  70. Anonymous // June 10, 2011 at 11:45:00 PM GMT+10  

    mike, it worked!! the random query is similar to getting a css file to reload, I don't know where I messed things up, but spent my time today, reviewed the source of your demos, cleared cache on my cms, opened a new browser, cleared it's cache and all nice a pretty!! you are super duper cool!!!

  71. Unknown // July 25, 2011 at 8:18:00 PM GMT+10  

    Hello Mike, many thanks for your great script. I got the Demo 3 working at but can't somehow get DEMO 4 to work. Strangely, the Blogger widget refuses the code you have given. In my case, I have stored both scripts in the Blogspot HTML,only the calling code is in the widget, which seems OK for Demo 3.
    Could you please let me know how to solve this ?
    Many thanks for the great tool again.

  72. Mike // July 26, 2011 at 7:24:00 AM GMT+10  

    @Lasting Rose,
    mostly because of option "header" that contains html code as a value. so, try to escape html or avoid using html at all in that option..
    for more assistance you can email me.

  73. Unknown // July 29, 2011 at 3:45:00 AM GMT+10  

    Mike, Even my Demo3 on the widget stopped working and I can't get it to work even when I load the css, the scripts and the call all in the main HTML of blogger. I have even escaped the call like this.

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

    Can't get a clue as to why nothing is loading.

  74. Mike // July 30, 2011 at 2:22:00 AM GMT+10  

    @Lasting Rose,
    I tried to reply to your email but I got a delivery-failure message. anyway, here is the sample code I wanted to send you

  75. RAGHAVENDRA MAHENDRAKAR // August 5, 2011 at 1:11:00 AM GMT+10  

    Hi Mike,

    As per your link, why the twitter thumbnails are limited to 100?

  76. Mike // August 5, 2011 at 6:19:00 AM GMT+10  

    Because, Twitter API returns latest 100 Followers/Friends or less per 1 request..

  77. Anonymous // August 21, 2011 at 9:23:00 PM GMT+10  

    Sorry for my English, is translated with software
    is a wonderful utility
    I am installing in joomla, but I have two problems.

    1 - there is much separation between the top and my title??
    2 - how I can reduce the width

    thanks a million
    Best Regards

  78. Mike // August 22, 2011 at 7:27:00 AM GMT+10  

    please send me a sample url to my email mike @

  79. Mike // August 23, 2011 at 8:00:00 AM GMT+10  

    You can remove it by setting (info) option to empty string ('')

  80. Anonymous // August 30, 2011 at 7:37:00 AM GMT+10  

    Hello Mike, my name is Betsa, I'm working in a web project and I used your usefull jQuery widget, but already have a problem:

    My boss is (bother me) needing that the result of our followers be saved in a table of our data base. Can you please give me an idea about how can I do it?

    Sorry by my poor english u.u and Im waiting your answer!

  81. Mike // August 30, 2011 at 7:59:00 AM GMT+10  

    If you are trying to build it from scratch you can go though the Twitter API.
    If you still need help, please email me..

  82. Arun // September 10, 2011 at 7:29:00 PM GMT+10  

    I have tried this on my website but unfortunately images appear one by one.

    and not

    the same issue someone has mentioned above but he couldn't convey it better so i think this may make you clear

  83. Mike // September 10, 2011 at 9:01:00 PM GMT+10  

    I guess you forgot to copy CSS from demo page. if you need further assistance email me a sample url.

  84. Stanislau // September 12, 2011 at 6:47:00 PM GMT+10  

    Your script conflicts with Mootools, how to resolve conflict?
    Sorry for my english, I'm from Belarus...

  85. Mike // September 13, 2011 at 12:11:00 AM GMT+10  

    My plugin is not the problem for sure :)

    There are many solutions for that, try this
    1) jquery include
    2) jQuery plugins include and code
    3) jQuery.noConflict();
    4) mootools include
    5) mootools plugins

    You could also avoid using "$" as shortcut for jQuery object, and use "jQuery" instead. After calling "jQuery.noConflict()" which disables the shortuct "$" at all.

    Finally, you can avoid having both libraries on one page..

    if you need further assistance, email me your url.

  86. Piotr Ślusarski // January 18, 2012 at 9:31:00 PM GMT+11  

    Mike - is it possible not to animate photos of followers, showing e.g. one row of different photos each time the site is loaded?

  87. Mike // January 18, 2012 at 11:41:00 PM GMT+11  

    If you set 'users_max' the same as 'users' then no swapping happens.
    Also set transition time 'user_change' to 0.

    Showing different photos each time is loaded, can be added in future versions..

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]
More Tech Tips! | Technology tips on web development


Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS