Friday, November 6, 2009

Cross-domain RSS to JSON converter [jQuery plugin]

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.

12 comments:

  1. Nice, was just trying to pull something like this off the other day. Thanks for sharing.

    ReplyDelete
  2. Another way would be to use SimplePie (PHP RSS Reader) - and use jQuery to import the contents of the php file into a div-containter (or whatever). Then AJAX to refresh every now and then.

    Atleast, that's how I've done it so far. I'll look into this thing though :)

    ReplyDelete
  3. @Cinq, thanks for the note.
    @jasoncrane, no probs. Had the same problem with one of my projects last year. Would save me lots of hours and arguments :)

    ReplyDelete
  4. how to call functions from html?
    Can I use json format in grid?

    ReplyDelete
  5. Thank you for sharing. Will give it a try.

    ReplyDelete
  6. @hotmonitor, Google regarding the first question and you can use json anywhere you want. Depends what grid you're refering to (asp grids, javascript grids, etc.)

    @WPbud, Glad to share :)

    ReplyDelete
  7. how do you call json from ssjs?

    ReplyDelete
  8. Beautiful piece of code! Thanks for sharing it with the world. There may be a problem with the url when it's passed to Google. My feeds all have several querystring parameters that didn't work. I had to escape the url to get things working. (Line 22 in the jquery.jgfeed.js file.)

    Thought I'd pass that along in case anyone else runs into the same problem.

    ReplyDelete
  9. I'm having problems using this to display an RSS feed.

    My code is exactly the same as above, except I've replaced the entry.title section with a document.writeln statement (which I'm not posting because it includes an a href that this thing is turning into an actual link)

    This works perfectly fine in Firefox and Chrome on Linux and Windows - but on a Mac in Safari and Chrome it fails - which leads me to believe it's a webkit issue. Anyway, what it ends up doing is erasing the entire content of the frame and replacing it with the printed lines. It also fails in Internet Explorer, but in that case it just doesn't print anything at all (but keeps the rest of the page)

    Here's some screenshots:
    In Firefox: http://www.personal.psu.edu/bsf5033/PSUACLU/screenshots/firefox.tiff
    In IE: http://www.personal.psu.edu/bsf5033/PSUACLU/screenshots/IE.tiff
    In Safari: http://www.personal.psu.edu/bsf5033/PSUACLU/screenshots/safari.tiff

    I _believe_ the issue is that the items are being printed by a separate function. I did attempt to have them just store the values in an array and then print that array, but it tries to print before the values are loaded.

    Also note that in the screenshots the page is made up of iframes, so the part that gets wiped in Safari is the entire frame (CSS statements, body tags, everything), not just a small section of the site.

    ReplyDelete
  10. This is great, but where do you download the .js files?

    ReplyDelete
  11. Doesn't work on facebook :S
    http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=rolinga&q=http://www.facebook.com/feeds/page.php?id=8783725165&format=rss20

    ReplyDelete
  12. it's facinating how old this article is but still relevant, :) well done on this

    ReplyDelete