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.- 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"
If you need a real life example, try this:
src="http://pipes.yahoo.com/pipes/pipe.run?_id=pipeID&_render=json&_callback=pipeCallback">
</script><script type="text/javascript"
src="http://pipes.yahoo.com/pipes/pipe.run?_id=lLJMf7HH2xGlUlFRJjBjOg&_render=json&_callback=pipeCallback">
</script> - 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;
} - 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> - 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.
- 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.
- obj.value.items[x].title -- the title of the article.
If you're able to make use of this code, please feel free to post your example in the comments.
]^23003]^23900]navy],](](]]]black],]3]1]2]3]1]1]4]1]2]3]1]1],](](]^23FFFff])])]Freshblog]Blogger^20Hacks^2C^20Categories^2C^20Tips^20^26^20Tricks],](],](](]^23900](](](]^23666](](](]^23900](],](](]75]20],](](]^23FFF])])]^23900]1.5]15],](](]^23999])])]^23900]^23CCC])])]^23900]30]^23003]^23003],](](]^23333](],](]^23003]^23039]^2306C],](](]^23CCC])])],](](]^23EEE])])],](](]^23CCC])])],](]^23006]^23666]15]3]25]20]^23003],](](],](],](](],](]^23003](](](],](](](],]black](](](],](](]black](](](](](],]^2336F]^23003](],](]Posted^20at^20^24TIME^20by^20^24AUTH.]20],](](]^23900])])]^23CCC])])]^23666]30]black]black],](](]^23333](],](]^23333]^23039]^2306C]Freshblog]]]Home]^24HOME]First^20Page]Email]^24EMAIL]Mail^20me^21]RSS]^24RSS]RSS^20Feed]Comments^20Feed]]Comment^20Feed^20]Archive]]]^24ARCHIVE]^20]]Freshtags]]]Horm])blog.horm.org]Hallucinations^20Of^20Reabsorbed^20Mind]Phorm])p.horm.org]Another^20Phormation]Etc]]]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_psycho.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22PsycHo^3A^20Free^20Template^20Generator^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E]^24PSYCHO]PsycHo^3A^20Free^20Template^20Generator]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_firefox.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22Get^20FireFox^21^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E])www.mozilla.org/products/firefox/]Get^20Firefox^21]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_xhtml.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22XHTML^20Validator^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E])validator.w3.org/check/referer]XHTML^20Validator^26^2361470^3BPsycHo}){kind=small}
function pipeCallback(obj)
Thanks
Is there a way to add more elements to blogger posts?
I googled it but there's too much unfriendly info. Any tutorial u recommend?
best, Clau
http://plugins.jquery.com/plugin-tags/json2html