Cristiano on Tech/Life How to Build Your Own Lifestream with Yahoo Pipes and NO Server Side Logic
Step 4: Load the Data in Javascript
So, now that you created a nice Pipe it is time to show this data in a nice way without having to use anything like PHP or other server side code (that was the whole point of this article, right?). The simplest way to do this is to take the JavaScript Object Notation (JSON) output of the Pipe and loading this in your HTML. Every pipe has different output possibilities including JSON and they can be found by clicking the “More options” button on the Pipe’s page.
For my lifestream, the JSON url looks something like this:
http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json
Unfortunately, you can’t directly load the JSON data from a third party site with Ajax as that would make cross side scripting possible. The solution to this problem is to simply load the JSON in a <script> tag in your <head> like this:
<script type='text/javascript' src='http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json&_callback=drawLifeStream'>
As you can see I added a new parameter to the src to provide some kind of callback function. Normally, when you call the JSON link, you will just get a JSON object, which is basically useless, when you add a _callback parameter though, Yahoo Pipes will wrap the entire object into a call to the function you provided to callback. In other words, when I load this script, it will make a call to my own drawLifestream() function with the JSON object as a parameter. Once in the function, you and I can use this JSON data and draw it in the browser screen.
To present the data I used the PrototypeJS and a little bit of the Scriptaculous libraries which I would recommend to anyone who has to do a lot of DOM manipulation.
PrototypeJS proved to be pretty useful too for dynamically loading the Yahoo Pipes JSON output. With the following trick you can load any Yahoo Pipe output, dynamically, without having to load the data in the page header. The effect is much like loading with an Ajax call.
function loadJSON() {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json&_callback=drawLifeStream';
document.getElementsByTagName("head")[0].appendChild(newScript);
}
This PrototypeJS powered function simply adds a new <script> element to the DOM, within the tag, therefore loading the script dynamically and asynchronously calling the drawLifestream() function as the remote JSON is loaded. The loadJSON() function can be called from a keypress, or whatever event needed to trigger the loading.
The cool thing is that the data will remain cached even if you add/remove the script tag, guaranteeing fast response times. Obviously this causes for some caching issues when you don’t want them, but more in the next section.
[...] [BarcampLondon3] Creating a Lifestream with Yahoo Pipes (CristianoBetta) By Kerry It’s all here! [...]
[...] Comments Cristiano on Tech/Life » How to Build Your Own Lifestream with Yahoo Pipes and NO Server Side … on My Barcamp Berlin Presentation on Yahoo PipesReinier Meenhorst on My Barcamp Berlin Presentation [...]
Nice! I built mine (http://360.whatfettle.com) using Venus and keep meaning to present it on a SIMILE timeline ..
Hi Paul. What I like about your version is that show pictures/photos. I was thinking of doing something in SIMILE, but if you add a lot of rich media content that might get a bit confusing quickly.
I had never heard of Venus. What is it? It’s a back-end technology I assume? Thing to remember here is that my project was also kind of an exercise for me to see what Yahoo Pipes and what I could do with it.
[...] This article was originally posted on 23 November 2007 on Cristiano’s own blog. This article is technical but not necessarily complete on the details, keep that in mind. Further more, this article served as the basis for Cristiano’s BarcampLondon3 talk. [...]
[...] Cristiano on Tech/Life ยป How to Build Your Own Lifestream with Yahoo Pipes and NO Server Side Logic – Another post on createing a Lifestream using Yahoo Pipes with no server side code. Just Javascript and HTML [...]
Hi, the pipe debug link in this page is broken.
Which link do you mean?
There is loads of stuff broken, especially the images. My hosting provider lost them by accident and I still haven’t had time to put them back.
It was the one on page four (I didn\’t realise the comments were common across all pages). P.S. thanks for the article!
The link seems to work fine. Maybe you can’t access it because you aren’t logged in. The debug output is only accessible when you are editing the pipe. So go and make an account and start editing your or my pipe.