No doubt that Web2.0 is one of the best things that happened in our lifetime (besides the internet itself). When we mention Web2.0 first things that come into our minds are AJAX, rounded corners, clean and light layouts and of course RSS feeds. Nowadays, you either provide an RSS feed or consume it in your web app using AJAX/JavaScript.

The only bad thing is that you can not request cross-site content with AJAX requests. Requesting someone else’s RSS in your JavaScript falls into this limitations. One way to overcome this problem is to apply a server-side proxy workaround. However, there is even better solution and workaround – RSS to JSON conversion.

Basically, using Google Feeds API service and jQuery plugin you can request and get any RSS from different domain converted into the JSON object in your javascript.

Let’s see an example of RSS2JSON converter:

<script src="jquery.js"></script> <script src="jquery.jgfeed.js"></script> <script> $.jGFeed('http://twitter.com/statuses/user_timeline/26767000.rss', function(feeds){ // Check for errors if(!feeds){ // there was an error return false; } // do whatever you want with feeds here for(var i=0; i<feeds.entries.length; i++){ var entry = feeds.entries[i]; // Entry title entry.title; } }, 10); </script>

In order to have universal client-side RSS to JSON converter you first need to include jquery.js and Google Feeds API plugin jquery.jgfeed.js. Then use jQuery plugin and Google Feeds API to get reliable and fast RSS to JSON(P) converter.

The code above gets Twitter RSS feeds in JSON format and does whatever it wants with it. Great workaround isn’t it :)

To see jGFeed()’s argument lists and how to use it please read this post.

Some time ago I created jQuery Twitter plugin – jTwitter. Plugin lets you get data about any Twitter user, such as user’s bio, profile image, homepage URL, background image URL, following count, followers count, messages count, etc. without any Twitter API key. It is very useful to attach additional Twitter data to your site’s user profiles, etc.

However, it was not very handy for creating your own and custom Twitter Badge. Well, right until now! I updated jTwitter plugin and now it can get you not only Twitter user details but also any number of that user’s latest posts. And yes, all these you can do without any Twitter API keys.

Here is the main function and its argument details:

$.jTwitter(username, numberOfPosts, callbackFunction); /* username - Twitter username numberOfPosts - Number of user posts to get callbackFunction - callback function to call when data is loaded */

Let’s see a real life example now. In example below, we are fetching latest 3 posts of jQueryHowto Twitter user and appending those post messages to some DOM element with an id=tweets.

$.jTwitter('jQueryHowto', 3, function(posts){ for(var i=0; i<posts.length; i++){ $('#tweets').append(posts[i].text); } });

You can see example usage and demo here.

To get a clear view of what data is returned and available in your callback function here is an example of returned JSON data object:

/* Example of returned object */ [ { 'in_reply_to_user_id':null, 'in_reply_to_screen_name':null, 'source':'web', 'created_at':'Fri Sep 18 06:11:15 +0000 2009', 'truncated':false, 'user':{ 'profile_background_color':'9ae4e8', 'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...', 'notifications':false, 'time_zone':'Central Time (US & Canada)', 'url':'http://jquery-howto.blogspot.com', 'screen_name':'jQueryHowto', 'following':true, 'profile_sidebar_fill_color':'e0ff92', 'created_at':'Thu Mar 26 14:58:19 +0000 2009', 'profile_sidebar_border_color':'87bc44', 'followers_count':2042, 'statuses_count':505, 'friends_count':1015, 'profile_text_color':'000000', 'protected':false, 'profile_background_image_url':'http://s.twimg.com/a/1253209888/images/themes/theme1/bg.png', 'location':'', 'name':'jQuery HowTo', 'favourites_count':15, 'profile_link_color':'0000ff', 'id':26767000, 'verified':false, 'profile_background_tile':false, 'utc_offset':-21600, 'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif' }, 'in_reply_to_status_id':null, 'id':4073301536, 'favorited':false, 'text':'Host jQuery on Microsoft CDN servers http://retwt.me/2N3P' }, { 'in_reply_to_user_id':null, 'in_reply_to_screen_name':null, 'source':'<a href="http://www.hootsuite.com" rel="nofollow">HootSuite</a>', 'created_at':'Thu Sep 17 17:20:21 +0000 2009', 'truncated':false, 'user':{ 'profile_sidebar_fill_color':'e0ff92', 'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...', 'friends_count':1015, 'url':'http://jquery-howto.blogspot.com', 'screen_name':'jQueryHowto', 'following':false, 'profile_sidebar_border_color':'87bc44', 'favourites_count':15, 'created_at':'Thu Mar 26 14:58:19 +0000 2009', 'profile_text_color':'000000', 'profile_background_image_url':'http://s.twimg.com/a/1253141863/images/themes/theme1/bg.png', 'profile_link_color':'0000ff', 'protected':false, 'verified':false, 'statuses_count':504, 'profile_background_tile':false, 'location':'', 'name':'jQuery HowTo', 'profile_background_color':'9ae4e8', 'id':26767000, 'notifications':false, 'time_zone':'Central Time (US & Canada)', 'utc_offset':-21600, 'followers_count':2038, 'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif' }, 'in_reply_to_status_id':null, 'id':4058535256, 'favorited':false, 'text':'jQuery Tip: Don't forget that you can load jQuery UI files from Google servers as well http://bit.ly/fJs2r' }, { 'in_reply_to_user_id':null, 'in_reply_to_screen_name':null, 'source':'web', 'created_at':'Thu Sep 17 05:44:30 +0000 2009', 'truncated':false, 'user':{ 'profile_sidebar_fill_color':'e0ff92', 'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...', 'friends_count':1015, 'url':'http://jquery-howto.blogspot.com', 'screen_name':'jQueryHowto', 'following':true, 'profile_sidebar_border_color':'87bc44', 'favourites_count':15, 'created_at':'Thu Mar 26 14:58:19 +0000 2009', 'profile_text_color':'000000', 'profile_background_image_url':'http://s.twimg.com/a/1253048135/images/themes/theme1/bg.png', 'profile_link_color':'0000ff','protected':false, 'verified':false, 'statuses_count':503, 'profile_background_tile':false, 'location':'', 'name':'jQuery HowTo', 'profile_background_color':'9ae4e8', 'id':26767000, 'notifications':false, 'time_zone':'Central Time (US & Canada)', 'utc_offset':-21600, 'followers_count':2035, 'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif' }, 'in_reply_to_status_id':null, 'id':4048429737, 'favorited':false, 'text':'Added a demo page for my 'How to bind events to AJAX loaded elements' blog post as requested by users http://bit.ly/q2tWe' } ]

As you can see, you get not only user’s latest posts but also all the information about posts and user who posted it on Twitter.

You might also be interested in my jQuery YouTube Plugin.
It gets any YouTube video’s thumbnail image.

If you are using Twitter don’t forget to follow me.

This jQuery plugin utilizes Google’s Feeds API and builds an abstraction layer that makes Google feed API easier to use for jQuery developers. The advantage of using this lightweight jQuery plugin is that you don’t have to learn and go through new API documentation.

Download Google Feed API jQuery plugin – jGFeed.

Here is how to use the plugin:

$.jGFeed('http://feeds.feedburner.com/jQueryHowto', function(feeds){ // Check for errors if(!feeds){ // there was an error return false; } // do whatever you want with feeds here for(var i=0; i<feeds.entries.length; i++){ var entry = feeds.entries[i]; // Entry title entry.title; } }, 10);

Available plugin arguments list:

jQuery Google Feed API plugin lets you specify the following settings:

• url – URL of the feed that you want to load
• callback – callback function to call after RSS feed is loaded
• num (optional) – number of blog entries to load (defaults to 3)
• key (optional) – Google API key to use while loading RSS feeds.

The plugin returns false if there was an error while AJAX loading your feed or the following feed object on success:

{ "title":"Blog Title", "link":"http://www.example.com", "author":"Author Name", "description":"Blog description.", "type":"RSS type (atom10, etc.)", "entries":[ { "title":"Blog entry title 1", "link":"http://www.example.com/entry-1.html", "author":"Post Author Name", "publishedDate":"Mon, 25 May 2009 07:07:00 -0700", "contentSnippet":"Short blog post snippet ...", "content":"Longer snippet of the blog post", "categories":[ "category 1", "category 2", "category 3" ] }, { "title":"Blog entry title 2", "link":"http://www.example.com/entry-2.html", "author":"Post Author Name", "publishedDate":"Mon, 25 May 2009 07:07:00 -0700", "contentSnippet":"Short blog post snippet ...", "content":"Longer snippet of the blog post", "categories":[ "category 3", "category 2", "category 1" ] }, ... }

If you don’t specify a URL it will also return false. If you want to use your own Google Feed API key you can get one here.

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.

It is Friday and we don’t want to read long posts and tutorials. So today’s post is going to be short and sweet. I’ve been playing a lot with Twitter lately. I wrote some jQuery and javascript functions that get user details, etc. I will share it with you next week.

But for today, I would like to share Twitter’s JSON and JSONP API URL. I am sharing it because it was hard to find it first. I actually wrote a jQuery plugin that gets Twitter user details using my previous post on cross site AJAX querying method. All Twitter API usage tutorials and articles I found on internet were based on RESTful non JSONP API, so I though I'll share Twitter JSON(P) API with you. Anyway...

Twitter JSON(P) API URL:

http://twitter.com/status/user_timeline/USERNAME.json?count=10 &callback=JSONPcallbackFunction

Here is a code to use with jQuery’s $.getJSON() function:

http://twitter.com/status/user_timeline/USERNAME.json?count=10 &callback=?

We have put ? (question mark) for callback function name so jQuery could replace it with a dynamic one that it has created.

Update: Check out jQuery Twitter API plugin – jTwitter, that uses this Twitter API.