How to dynamically read RSS

Question

I want to read several RSS feeds using jQuery.

I am trying to write a flexible function that just takes an RSS URL and only displays its TITLE AND IMAGE , how can I do this for multiple RSS URLs?

Answer 1

The easiest way is to use the Google AJAX Feed API . They have a really simple example that is right for you:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

</script>
<div id="feed"></div>

Of course, you can mix jQuery with the API instead of using your own DOM calls.

Answer 2

JQuery: http://plugins.jquery.com/project/jFeed

Answer 3

A bit late for the party, but I actually did something similar to this using the deviantART gallery feed and displaying the latest thumbnail. I have included it in several functions for convenience:

function keratin_callback(elem, data)
{
    if (!data
        || !data.entries
        || data.entries.length < 1
        || !data.entries[0].mediaGroups
        || data.entries[0].mediaGroups.length < 1
        || !data.entries[0].mediaGroups[0].contents
        || data.entries[0].mediaGroups[0].contents.length < 1
        || !data.entries[0].mediaGroups[0].contents[0].thumbnails
        || data.entries[0].mediaGroups[0].contents[0].thumbnails.length < 1) {
      $("<span>Data returned from feed not in expected format.</span>").appendTo(elem);
      return;
    }

    var entry = data.entries[0];
    $("<img>").attr("src", entry.mediaGroups[0].contents[0].thumbnails[0].url)
               .appendTo(elem)
               .wrap("<a href="" + entry.link + "" title="Title: " + entry.title + "\nPublished: " + entry.publishedDate + "" rel="related" target="_blank"></a>");
}

function keratin(elem, url)
{
    //keratin written by adam james naylor - www.adamjamesnaylor.com
    if (!elem || elem.length < 1) return; //no element found
    $.ajax({
        //you could use document.location.protocol on the below line if your site uses HTTPS
        url: 'http:' + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url + '&cache=' + Date.UTC()),
        dataType: 'json',
        success: function(data) {
            if (!data || !data.responseData) {
                return keratin_callback(elem, null);
            }
            return keratin_callback(elem, data.responseData.feed);
        }
    });
}

$(document).ready(function() {
    keratin($('#da_gallery'), 'http://backend.deviantart.com/rss.xml?q=gallery%3Adeusuk%2F28671222&type=deviation')
});

Full details here: http://www.adamjamesnaylor.com/2012/11/05/Keratin-DeviantART-Latest-Deviation-Widget.aspx