One of the things I tend to take for granted about using Yahoo Pipes is how to actaully grab the output of a Yahoo Pipe into a webpage. Here’s a simple recipe using the JQuery Javascript framework to do just that.
The example demonstrates how to add a bit of code to a web page that will load in the contents of an RSS feed from a specified and arbitrary URL using Yahoo pipes.
Loading RSS directly into a page from an arbitrary website as an XML file is typically not possible if the RSS feed is hosted on a web domain that is different to the domain of the page the feed is to be loaded in to because of the security model used by the web browser. However, Javascript files can be loaded in to a web page from any domain, which is how this workaround works. The address of the RSS feed is passed to Yahoo pipes, and the pipe generates a Javascript version of it (using JSON – Javascript Object Notation) that can be loaded in to the page.
Here’s the code (gist):
<html><head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
//Routine to display the items of an RSS feed in a web page
// The output is attached to a uniquely identified HTML item
// The URL of the RSS feed you want to display
var url='https://ouseful.wordpress.com/feed';
//The id of the HTML element you want to contain the displayed feed
var containerID="test";
//------------------------------------------------------
// The gubbins...
function cross_domain_JSON_call(url){
// url points to an RSS feed
url="http://pipes.yahoo.com/ouseful/proxy?url="+encodeURIComponent(url)+"&_render=json&_callback=?";
// displayOutput(url);
//fetch the feed from the address specified in 'url'
// then call "myCallbackFunction" with the resulting feed items
$.getJSON(
url,
function(data) { myCallbackFunction(data.value.items); }
)
}
// A simple utility function to display the title of the feed items
function displayOutput(txt){
$('#'+containerID).append('<div>'+txt+'</div>');
}
function myCallbackFunction(items){
// 'items' contains the separate feed items;
// 'title' contains the item title, 'link' the url, 'description' the main text
// Run through each item in the feed and print out its title
for (var i=0; i < items.length; i++){
displayOutput(items[i].title);
}
// You could easily call 'myArbitraryCallbackFunction(items)" from this function
}
// Tell JQuery to call the feed loader when the page is all loaded
$(document).ready(cross_domain_JSON_call(url));
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
If you read through the code, you should see that most of the work relating to getting the feed into the page is done for you once you have provided the URL. Note that you will probably also need to provide a function to process the feed items once they are loaded in to the page.
OUseful.Info, the blog... 
Cool. But when I try to insert multiple feeds into one webpage, only the last one is displayed. I am no JavaScript guru – could you please give me any hint? I just tried to insert this script twice into a single page (with different url and containerID for each of them) but I failed miserably.