Blogger Hacks, Categories, Tips & Tricks

Saturday, March 17, 2007
Pipes, JSON, and code for your website
Although there's still quite a bit going on with Yahoo Pipes, interest in the gee-whiz user interface seems to be waning around the blogosphere. While the drag-and-drop interface is cool, I think one of the more useful and interesting features of Yahoo Pipes is its ability to export data as JSON data.

Yahoo makes all of its data -- including Pipes feeds data -- available as JSON. JSON -- Javascript Object Notation -- is just data presented as Javascript code. That means you can write Javascript to work directly on the data without any XMLHttpRequest objects to open, get and parse. And because Yahoo provides a nifty callback mechanism, you don't run into the cross domain security issues that plague Ajax developers -- everything runs on the client and Yahoo Pipes enables some truly interesting mashup possibilities that go way beyond the "aggregate 200 feeds and filter on my keywords and pull in some Flickr photos" examples that dominate most blog discussion on Yahoo Pipes.

Code for your site

The most frequently asked question I see on the Pipes discussion boards seems to be "How to I put Pipes feeds on my website?" Here are code examples showing how you can pull data from a Pipes JSON feed and display it automatically on any web page.

  1. Get the JSON feed data. Here's the code to do that. Replace "PipeID" with the feed you're interested in. Be sure to retain "_render=json&_callback=pipeCallback". More about the callback parameter later. Make sure this script is someplace it will be executed when the HTML page loads.
      <script type="text/javascript" 
    src="http://pipes.yahoo.com/pipes/pipe.run?_id=pipeID&_render=json&_callback=pipeCallback">
    </script>
    If you need a real life example, try this:
     <script type="text/javascript"
    src="http://pipes.yahoo.com/pipes/pipe.run?_id=lLJMf7HH2xGlUlFRJjBjOg&_render=json&_callback=pipeCallback">
    </script>


  2. Write some CSS. To keep my example simple, I'll use <div> to put things where I want to go. Because this is a callback function, you can't just use document.write because you don't know where the text will actually end up unless you use CSS to place the text. You can define this however you want, but in my sample code I'll use a CSS ID called "leftside" and define a left sidebar.

    #leftside {
    position:absolute;
    left:10px;
    width:180px;
    border:1px solid black;
    font-size:0.8em;
    padding:8px;
    margin:8px;
    }

  3. Create the callback function.The <HEAD> section of the HTML page is as good a place as any to put this code.

    <script type="text/javascript">
    function pipeCallback(obj)
    document.write("<div id=leftside><h3>My Pipes Feed</h3>");
    var x;
    for (x = 0; x < obj.count ; x++)
    {

    var buildstring = "<b><a href=" + obj.value.items[x].link + ">" + obj.value.items[x].title + "</a></b>. <span id=desc>" + obj.value.items[x].description + "</span><br />";
    document.write(buildstring);
    buildstring = null;
    }
    document.write("</div>");

    }
    </script>

  4. Some explanation. The function pipeCallback is called by the JSON method that you loaded in Step (1) above. Note that the name of the function matches the _callback parameter you used in calling the first script. obj is the JSON object with one or more members. I'll describe the members in the next step. You can modify this function to change how the link text looks and where the text is placed, but in this example the Title will be a link to the URL of the original article, and the description is also displayed. In real life, you may want to limit the number of items that are actually displayed.
  5. Arrays and fields. obj.count is the number of members that are in the object. obj.value.items is an array of the members. These members may have different elements depending on how the Pipe was constructed -- you'll need to look at the actual JSON data to see what's specifically available -- but typical RSS feed things will be there, including
    • obj.value.items[x].title -- the title of the article.
    • obj.value.items[x].description -- the text or summary of the article.
    • obj.value.items[x].link -- the URL to the original article.
    • obj.value.items[x].pubDate -- the publication date of the article.


If you're able to make use of this code, please feel free to post your example in the comments.
Posted at 3:15 AM by Yokota Fritz.
9 Comments:
<    >
Anonymous pablokani said...
I´ve tried to embed it in blogger and it doesn´t work. Do you Know why? . Sorry i´m a nerd.

<    >
Anonymous Simone said...
Very useful (soon on http://www.panarea.com), but, pay attention, you miss the { after
function pipeCallback(obj)

Thanks

<    >
Anonymous sherwin said...
works for me thanks. and thanks simone for spotting that missing {

<    >
Blogger citrine said...
What if you want more than the typical RSS feed things?

Is there a way to add more elements to blogger posts?

<    >
Anonymous Anonymous said...
Thank you for providing some decent documentation on how to use this service. I don't understand why Yahoo! couldn't do it themselves in a readily accessible fashion. I looked all over their site and couldn't find anything on how to use the callback. Nice.

<    >
Blogger claudia said...
I'm a novice but how do I read the json file?
I googled it but there's too much unfriendly info. Any tutorial u recommend?
best, Clau

<    >
Anonymous raj said...
It worked, thank you

<    >
Anonymous Anonymous said...
nice work .. noticed a new plug-in for jquery called json2html ... you create transforms that you can easily appy to a yaho pipe's output

http://plugins.jquery.com/plugin-tags/json2html

<    >
Anonymous andry said...
very good tutorial and can hopefully help me in building json in the application that I created for this lecture. thank you

Links to this post:

Create a Link


eXTReMe Tracker