skip to main | skip to sidebar

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

18 comments

  1. Simon Wood // October 22, 2009 1:13:00 PM GMT  

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

    http://www.hpoom.co.uk/projects/tweetpeep/

  2. Mike // October 22, 2009 4:10:00 PM GMT  

    @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!

  3. Elijah Manor // October 23, 2009 4:58:00 PM GMT  

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

  4. Mike // October 23, 2009 11:29:00 PM GMT  

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

  5. Andrew Badera // October 29, 2009 9:26:00 AM GMT  

    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 29, 2009 1:21:00 PM GMT  

    @Andrew,
    you welcome :)

  7. Anonymous // November 3, 2009 5:11:00 PM GMT  

    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.

  8. Mike // November 3, 2009 6:44:00 PM GMT  

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

  9. Anonymous // November 3, 2009 11:53:00 PM GMT  

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

  10. Anonymous // November 5, 2009 7:57:00 PM GMT  

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

  11. Mike // November 5, 2009 10:58:00 PM GMT  

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

  12. Mia // November 13, 2009 11:40:00 PM GMT  

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

  13. Mike // November 14, 2009 12:14:00 AM GMT  

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

  14. Beauty // November 26, 2009 9:33:00 AM GMT  

    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 10:22:00 AM GMT  

    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 8, 2009 4:32:00 PM GMT  

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

  17. Mike // December 9, 2009 12:28:00 AM GMT  

    @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?

  18. Anonymous // December 15, 2009 11:53:00 AM GMT  

    Brilliant absolutely brilliant!!!

Post a Comment

Thank you for taking the time to comment..But don't waste it on spamming!

Recent Posts

Mike

Mike MoreAfter few years as a web developer, I started to like blogging as a way to improve my skills and to share knowledge too. My favorite topics are jQuery, JavaScript, ASP.Net, XML, Twitter, Google.

Subscribe by email

Enter your email address:

or via Full RSS Short RSS

Now, take a break

<connect> </connect>