I want to read multiple RSS feeds using jQuery.

I'm trying to write a flexible function that will just take the RSS URL and it will output only its TITLE AND IMAGE how to do that for multiple RSS URLs?

I want to read multiple RSS feeds using jQuery.

I'm trying to write a flexible function that will just take the RSS URL and it will output only its TITLE AND IMAGE how to do that for multiple RSS URLs?

• javascript
• jquery
• rss

Share Improve this question Follow edited Nov 6, 2012 at 13:17 Andreas Louv 47.1k1313 gold badges107107 silver badges126126 bronze badges asked Feb 24, 2010 at 1:22 trrrrrrmtrrrrrrm 11.8k2525 gold badges8787 silver badges131131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The easiest way would be to use the Google AJAX Feed API. They have a really simple example, which suits what you want nicely:

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

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

function initialize() {
  var feed = new google.feeds.Feed("http://www.digg./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 native DOM calls.

Have you seen this JQuery plug-in: http://plugins.jquery./project/jFeed

A little late to the party but I actually did something similar to this using the deviantART gallery feed and displaying the latest thumbnail. I wrapped it up into a couple of functions for easy use:

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.
    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./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./rss.xml?q=gallery%3Adeusuk%2F28671222&type=deviation')
});

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