Putting Yahoo! Pipes and jQuery Together

Blog

Putting Yahoo! Pipes and jQuery Together

share

It's been a while since I gushed about Yahoo Pipes, hasn't it? Well, the RSS-combining service remains insanely powerful. This morning I decided to try using it with one of my other favorite web technologies: jQuery. When combined, the two can take the place of many aggregation tasks that previously required a server.

Here's the problem I set out to solve: a bunch of my friends write for more than one blog. They usually have a personal site and contribute to a number of other multi-author blogs. Sometimes they keep a list of their posts in a del.icio.us sidebar block. But maintaining that can be kind of a pain — they have to remember to create a new del.icio.us entry every time they post. Clients like Pukka make using del.icio.us a breeze, but this workflow is still not as automated as it could be (in that it exists at all).

As you know, Pipes makes it easy to combine and filter RSS feeds. Here's a pipe I threw together containing feeds from a couple of EchoDitto clients and our main blog. Naturally we love all of our clients equally, but for my friends' purposes a simple Pipes filter block could be applied to check the dc:author field, ensuring that no coauthors' posts are retrieved. The result will be an aggregated feed of the author's entries.

But how to retrieve them? jQuery 1.2 added in support for JSONP, an unbelievably slick technology that allows Javascript to load JSON data from different domains. There are two things you need to know to get this to work with Pipes: how to get the service to spit out JSON, and how to pass it a JSONP callback (which safely assigns the JSON to a given variable name — without this, loading cross-domain data would be a huge security hole). Both things are accomplished by adding parameters to your pipe's querystring.

Getting JSON is simple. Just add _render=json. Setting up the JSONP callback is even easier: jQuery handles the process of creating a unique name for the JSON container, so you just have to specify a question mark as the callback in the querystring. Pipes' JSONP param is named _callback. So your full JSONP URL will end up looking something like this:

http://pipes.yahoo.com/pipes/pipe.run?_id=PnGJw3yU3BGyvidq8SvLAg&_render=json&_callback=?

Now when you call the $.getJSON method you'll end up with a data structure containing your aggregated blog entries. You don't have to go much farther than the jQuery docs for $.getJSON() to see how to display that as a list. I couldn't resist, though, and added in some extra bells & whistles — mostly just accounting for Feedburner and using favicon.ico to visually differentiate the entries' originating blog.

#sample-feed-block ul, #sample-feed-block ul li
{
list-style-type: none;
background-image: none !important;
}

#sample-feed-block ul li a
{
display: block;
background-repeat: no-repeat;
background-position: 3px 3px;
padding: 2px 0 0 25px;
margin-bottom: 0.5em;
}

$(function(){
var CssToAdd = new Object();
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=PnGJw3yU3BGyvidq8SvLAg&_render=json&_callback=?',
function(data){
$.each(data.value.items, function(i,item){
var domain = ((typeof(item['feedburner:origLink'])!='undefined') ? item['feedburner:origLink'] : item.link);
domain = domain.replace(/(http:\/\/.*?\/).*/i,'$1');
CssToAdd[domain.replace(/[^a-z]/ig,'_')] = domain;
$('').attr('href',item.link).text(item.title).addClass(domain.replace(/[^a-z]/ig,'_')).appendTo('#sample-feed-block');
});
$('#sample-feed-block a').wrapAll('

$.each(CssToAdd, function(c, d){
$('#sample-feed-block a.' + c).css('background-image','url(' + d + 'favicon.ico)');
});
});
});

And here's the code, for those interested:

<div id="sample-feed-block"></div>
 
<style type="text/css">
#sample-feed-block ul, #sample-feed-block ul li
{
   list-style-type: none;
   background-image: none;
}
 
#sample-feed-block ul li a
{
   display: block;
   background-repeat: no-repeat;
   background-position: 3px 3px;
   padding: 2px 0 0 25px;
   margin-bottom: 0.5em;
}
</style>
 
<script type="text/javascript">
$(function(){
   var CssToAdd = new Object();
	$.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=PnGJw3yU3BGyvidq8SvLAg&_render=json&_callback=?',
   function(data){		
      $.each(data.value.items, function(i,item){
         var domain = ((typeof(item['feedburner:origLink'])!='undefined') ? item['feedburner:origLink'] : item.link);
         domain = domain.replace(/(http:\/\/.*?\/).*/i,'$1');
         CssToAdd[domain.replace(/[^a-z]/ig,'_')] = domain;
         $('<a>').attr('href',item.link).text(item.title).addClass(domain.replace(/[^a-z]/ig,'_')).appendTo('#sample-feed-block');
      });
      $('#sample-feed-block a').wrapAll('<ul>').wrap('<li>');
 
      $.each(CssToAdd, function(c, d){
         $('#sample-feed-block a.' + c).css('background-image','url(' + d + 'favicon.ico)');
      });
   });
});
</script>

I see you like to read printed material. You should check out Nicco's book The End of Big: http://endofbig.com