Jquery RSS feed using Yahoo Pipes

A friend of mine has been using a free website service for information about his business. He wanted an RSS feed from another site and this free website service only offered html editing, no php or any other good stuff. So I found a way to bring in an RSS feed by using a Jquery script, so that displaying the feed was no longer a server side task. This method may not only be useful for people limited to on html editing by their host. It could also technically offload work from your server and save bandwith, not that pulling in a RSS feed would have too much effect on bandwidth. For this to work you need to query a different domain which has the rss feed. This is a problem because of a security feature in your web browser called the ‘same origin policy’ , where your script cannot access pages/services from a different domain.

The only way to use javascript to get data from another server is to get the RSS feed to output JSONP. Rather than write your own php script to serve out JSONP from an external rss feed, you can use a service called Yahoo Pipes (its really powerful). Follow these steps to create a Jquery RSS feed using Yahoo Pipes. Go to http://pipes.yahoo.com/pipes/, recover your old Yahoo account I know you had one once.

Front page of yahoo pipes

Now you need to go to ‘Create pipe’ and you get taken to the edit screen where you can start adding feeds and functions to manipulate the feeds. I decided I wanted a feed of the upcoming running races. I found a RSS feed from Ndorifn which has a whole lot of events around the country (please let me know if you find a better feed for running). In the pipes editor I added a filter to remove all the events with a few words associated with cycling to get mostly running events. I also limited the output to 10 events, take a look at the picture below. You can see how powerful the pipes service can be for complex queries on RSS feeds.

Yahoo pipes editing a RSS feed

Pipe everything together, save the pipe and run the pipe. Then you’ll see the output of your new rss feed. Grab the ‘Get as JSON’ link to get access to the JSONP I’ve been talking about.

Output of yahoo pipes

To get the this feed on your webpage add the following code. I’ve included the whole html page so you can understand it fully.

<!DOCTYPE html>
<html lang="en">
    <head >
        <meta charset="utf-8" />
        <title> Running Events</title >
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
            </script>
    </head >
    <body >
        <h1> Running Events RSS Exampe</h1 >
        <div id="my-feed"> Loading...</div >
        <script>
//for feeds
            $ (document ).ready (function () {
                $.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=7857ea1b65f40d499ee0a45cf675ba12&_render=json" ,
                              function (data ) {
                                  //console.log(data); //for intrest
                                  $ ("#my-feed") .html( '');
                                  $.each (data.value.items , function (index , item ) {
                                      $ ("#my-feed") .append( '<li>' + '<a href="' + item.link + '">' + item.title + '</a>' + '</li>');
                                  });

                              });
           });

        </script>
    </body >
</html>

You can see I’m using the Jquery getJSON function to get the data which needs to be JSONP for it to work. You can then pull out the relevant information like item.title, item.link, item.description and etc…

Output of the Jquery RSS feed using Yahoo Pipes

Hope this simple feed system helps you or at least gives you a taste of Yahoo Pipes.