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.
Update: Now plugin also get any number of any user's posts.

Here is an example of returned JavaScript object:

// Starting from version 1.1 plugin gets user posts
// the returned object has changed. See update.
{
	"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.

You can see example usage and demo here.

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.

28 comments:

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

    []

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

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

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

    ReplyDelete
  5. Isn't there a way to get the current status update or the list of recent tweets by a user?

    ReplyDelete
  6. Can anyone share how to install and use this plugin? Craig maybe? I am not too sure what needs to be placed where.

    George

    ReplyDelete
  7. Is this still working? I can't get any data back at all. Still planning a tutorial?

    ReplyDelete
  8. how do people create jquery tutorials and not show a working example of it?

    ReplyDelete
  9. Hi.
    Firstly your plugin is great and really easy to use (once I figured out the putting data on a page, since I haven't used jQuery that much) but I can't seem to find out how to get the last tweet (or more with a loop).
    Does your plugin have this function or am I missing something?

    Thanks again,

    Carl

    ReplyDelete
  10. Could someone post a demo page? i tried everything but i dont get it too work. I included jq 1.3.2, jwitter and output-demo js. Copied the example but the callback function isnt triggered. I dont get a error.

    ReplyDelete
  11. what is the html code to retrieve the twitter comments, can you help?

    ReplyDelete
  12. A demo example of this would be really useful.

    ReplyDelete
  13. I am getting Error jQuery not defined in jtwitter source file itself. Is there any Dependency File?

    ReplyDelete
  14. this great plugin and thanks for code but it's not working for me, I did as you said I'm use without api code. pls advice.

    ReplyDelete
  15. Hi , this is great.

    Can we extend this plugin more better?

    Can a user give his twitter login credentials and get all the tweets of the user.

    ReplyDelete
  16. @Carl you can simply request for the latest 1 tweet like this: $.jTwitter('YourUsername, 1, function(latest_post){ // your code });

    @Anonymous you don't need to include output-demo.js file. You can find an example usage here.

    @Freelance webdesigning, Sorry, didn't really get your question.

    @Anonymous, Yes, it depends on jQuery core file. See example usage here.

    @pakistani developer, See demo page. Link above.

    @Viswanadh, Yes, see demo page. Link above.

    ReplyDelete
  17. Thanks so much for this! Making a mashup site and this will help greatly!

    ReplyDelete
  18. Great attempt, but if you don't explain this from a novice level, you will just continue to have confused people. No one knows where to put this script, how to manage it, does it go on the server, the website, wordpress. Please explain.

    Thank you.

    ReplyDelete
  19. Any change this library will be uploaded to (Google) CDN?
    On our site we load the jquery from ajax.googleapiscom and I would prefer to load the jquery.twitter.js from a CDN as well

    ReplyDelete
  20. this plugin doesn't include retweets... STUPID TWITTER API, THEY MADE A PHILOSOPHY OUT OF SOMETHING THAT IS SO SIMPLE!!!

    ReplyDelete
  21. that was really great blog i love it very much...

    ReplyDelete
  22. Hi,

    The links appear in tweets are not click-able how do I solve this issue? Please help me...

    ReplyDelete
  23. I am getting the wrong id returned from jTwitter using post.id on every tweet except for the most recent one. I'm trying to wrap an anchor on each post to link back to tweet page, using twitter.com/#!/(name)/status/(id), but with the wrong id it just goes to twitters 404 page. anyone else have this issue or know of a fix? using jtwitter 1.1.1 and jquery 1.6.1

    ReplyDelete
  24. Is there a way to have more than one feed on the same page?

    ReplyDelete
  25. Is the example working correctly? Why can't I get tweets?

    ReplyDelete
  26. Even on your Testpage you get a Status Code:400 Bad Request

    ReplyDelete
  27. I have a problem with this plugin. It worked very well but from some point it just stop to work. Error is 404 like the twitter id is wrong. Can someone help ?

    Thanks

    ReplyDelete