Wednesday, April 29, 2009

jQuery Twitter API plugin

UPDATE: Plugin has been updated! For more up to date information read this post.

You might have noticed that I am talking and spending more time on Twitter lately. I have been helping Twitter users with their jQuery related questions and problems as well. If you are using Twitter and have some kind of jQuery related question I will be happy to help.

Anyway, after I found a Twitter JSON(P) API url last week, I spent some time playing with it and ended up with a jQuery plugin that when given a Twitter username retrieves and returns javascript object with user detials such as followers & following counts, full name, homepage URL, etc.

Download jQuery Twitter API - jTwitter here.

Here is an example of returned JavaScript object:

{
	"screen_name":"jqueryHowto",
	"name":"jQuery HowTo",
	"description":"jQuery and javascript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...",
	"url":"http://jquery-howto.blogspot.com",
	"followers_count":294,
	"friends_count":120,
	"favourites_count":0,
	"statuses_count":154,
	"location":"",
	"id":26767000,
	"time_zone":"Central Time (US & Canada)",
	"profile_image_url":"http://s3.amazonaws.com/twitter_production/profile_images/110763033/jquery_normal.gif",
	"notifications":false,
	"utc_offset":-21600,
	"following":false,
	"protected":false,
	"created_at":"Thu Mar 26 14:58:19 +0000 2009",
	"profile_link_color":"0000ff",
	"profile_sidebar_fill_color":"e0ff92",
	"profile_background_tile":false,
	"profile_sidebar_border_color":"87bc44",
	"profile_background_color":"9ae4e8",
	"profile_text_color":"000000"
	"profile_background_image_url":"http://static.twitter.com/images/themes/theme1/bg.gif",
}

As you can see the jQuery Twitter API plugin returns Twitter user's avatar URL as well. Using this jQuery plugin you could create another plugin that would return Twitter user's avatar image.

Here is how to use jTwitter:

// I am query data for "jqueryHowto" user
$.jTwitter('jqueryHowto', function(userdata){
  //Callback functn with the user data as shown above
  $('#profile input.url').val(userdata.url);
  $('#profile #avatar').html('<img src="'
       + userdata.profile_image_url + '" />');
});

The first parameter is a Twitter username and the second is a callback function that will be called after jQuery gets user details from the Twitter servers.

5 comments:

Jaydson Gomes said...

Hi Uzbekjon , i'm trying to use your Jquery Twitter Plugin here...but without success. The returned content is undefined. I'm using the Jquery 1.3.1 and my code is like this: $.jTwitter('jaydson', function(info){
console.log(info);
});
There's something wrong?
Thanks for the plugin!

[]

Uzbekjon said...

@Jaydson Gomes, Thanks for noticing. had a little typo. Uploaded the patched version. Should work just fine now.. :)

Joe said...

I am kinda new to this, where do I define the user name that i want to retrieve data?

Uzbekjon said...

@Joe, This is just an API. It let's you easily get Twitter user data, but the rest (putting that date on your page for example) you should do yourself...

Here is where you put twitter username:

$.jTwitter('TwitterUSERNAME', function(userdata){

});

PS. Keep tuned, I'll post a tutorial on how to use this twitter api...

Craig said...

Works great, thanks!!

Post a Comment