Create a simple Ajax RSS Widget with Jquery

So, suppose you want to embed the headlines from an RSS feed into your site. Assuming you’re not so fussed about SEO, but rather are looking for a useful piece of content for your users, you can use Jquery and Yahoo Pipes to easily embed the headlines (and summaries if you like) into your page.

Step 1: Create a Yahoo Pipe for the RSS feed (or feeds) that you want to include.

You need a Yahoo account to use pipes, so if you don’t have one, you’ll need to get one. Once you have it, just log into the pipes site here: http://pipes.yahoo.com You want to choose, Sources > Fetch Feed – this will add a Fetch Feed box into your pipe editor, now link this with the Pipe Output. That’s it (Pipes are extremely powerful, however this i all we need for this particular example). Here’s how the final pipe looks: Save the Pipe. Go “Back to My Pipes” and get the URL for the new pipe as JSON. Mine pipe URL is: http://pipes.yahoo.com/pipes/pipe.run?_id=b5c348713f1c84193acf3723d4d148a9&_render=json Now that you have the JSON url, we can use jquery to render these results into a useful widget on our page. Firstly, we need to make sure that Jquery is being included on our page. I do this using the google hosted solution, so basically it is loaded from google’s servers (and cached). So, in the head of your page (if jquery isn’t already there) we add this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Step 2: Set up our markup and CSS

Now we create the necessary markup to hold our results. Where you want the widget to appear, we append this:

<div id="rssdata">
    <ul class="rss-items"></ul>
    <div class="loading">Loading RSS items...</div>
</div>

Obviously you can use whatever ids and classes you like, just remember to change the javascript and CSS that follows so Jquery can find the right elements. Basic CSS styles:

#rssdata ul.rss-items
{
    display: none;
    margin: 0;
    padding: 0;
}
#rssdata ul.rss-items li
{
    display: block;
    margin: 0;
    padding: 0;
}
#rssdata ul.rss-items a
{
    margin: 0;
    padding: 0;
    display: block;
    padding: 2px 6px;
    background: #ccc;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}
#rssdata ul.rss-items a:hover
{
    background: #666;
    color: #fff;
    text-decoration: none;
} 

Step 3: Building the Widget using Jquery..

Now, we need to make our progressively enhanced Jquery:

$('#rssdata').ready(function()
{
    var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=b5c348713f1c84193acf3723d4d148a9&_render=json&_callback=?';
    $.getJSON(pipe_url,function(data)
    {
        $(data.value.items).each(function(index,item)
        {
            var item_html = '<li><a href="'+item.link+'">'+item.title+'</a></li>';
            $('#rssdata ul.rss-items').append(item_html);
        });
        $('#rssdata div.loading').fadeOut();
        $('#rssdata ul.rss-items').slideDown();
    });
});

So, in english, we add a ready function to the #rssdata div, it holds the JSON url from our pipe above, with &_callback=? added on the end (this allows cross domain JSONP requests). And then the ready function simply using jquery’s getJSON method to load the results of our pipe and turn them into HTML elements that we then append into our UL. Once the loaded data has all been appended, we use fadeOut to hide our Loading message and then slideDown to make our UL slide into view nicely. If you need more help, here’s a single HTML page that has all the code in the tutorial in it, for easy use (you can also use this to preview the effect). That’s it.