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.
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){
ReplyDeleteconsole.log(info);
});
There's something wrong?
Thanks for the plugin!
[]
@Jaydson Gomes, Thanks for noticing. had a little typo. Uploaded the patched version. Should work just fine now.. :)
ReplyDeleteI am kinda new to this, where do I define the user name that i want to retrieve data?
ReplyDelete@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...
ReplyDeleteHere 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...
Works great, thanks!!
ReplyDeleteIsn't there a way to get the current status update or the list of recent tweets by a user?
ReplyDeleteCan anyone share how to install and use this plugin? Craig maybe? I am not too sure what needs to be placed where.
ReplyDeleteGeorge
Is this still working? I can't get any data back at all. Still planning a tutorial?
ReplyDeletehow do people create jquery tutorials and not show a working example of it?
ReplyDeleteHi.
ReplyDeleteFirstly 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
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.
ReplyDeletewhat is the html code to retrieve the twitter comments, can you help?
ReplyDeleteA demo example of this would be really useful.
ReplyDeleteI am getting Error jQuery not defined in jtwitter source file itself. Is there any Dependency File?
ReplyDeletethis 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.
ReplyDeleteHi , this is great.
ReplyDeleteCan we extend this plugin more better?
Can a user give his twitter login credentials and get all the tweets of the user.
@Carl you can simply request for the latest 1 tweet like this: $.jTwitter('YourUsername, 1, function(latest_post){ // your code });
ReplyDelete@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.
Thanks so much for this! Making a mashup site and this will help greatly!
ReplyDeleteGreat 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.
ReplyDeleteThank you.
Any change this library will be uploaded to (Google) CDN?
ReplyDeleteOn our site we load the jquery from ajax.googleapiscom and I would prefer to load the jquery.twitter.js from a CDN as well
this plugin doesn't include retweets... STUPID TWITTER API, THEY MADE A PHILOSOPHY OUT OF SOMETHING THAT IS SO SIMPLE!!!
ReplyDeletethat was really great blog i love it very much...
ReplyDeleteHi,
ReplyDeleteThe links appear in tweets are not click-able how do I solve this issue? Please help me...
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
ReplyDeleteIs there a way to have more than one feed on the same page?
ReplyDeleteIs the example working correctly? Why can't I get tweets?
ReplyDeleteEven on your Testpage you get a Status Code:400 Bad Request
ReplyDeleteI 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 ?
ReplyDeleteThanks