Google Apps Hacks

329  - ROLL YOUR OWN ANALYTICS API FOR A “MOST POPULAR POSTS” WIDGET

HaCK

# 135



The nal step is to take the JSON data returned by Yahoo! Pipes and display the contents on your

web site, which can be done using some client-side JavaScript similar to this (replace the bold

 with the ID of your pipe):

<div id="popularPosts">Loading...</div>

<script type="text/javascript"><!--

function topcontentCallback(obj) {

var url, title, output, i;

i = 0;

output = '<ul>';

while (i < 5 || i < obj.count) {

url = "http://www.yoursite.com" + obj.value.items[i].Key;

title = obj.value.items[i].loopfetchpage[0].content;

// remove the <title> tags the pipe leaves in:

title = title.substring(27, title.length-8);

output += '<li><a href="' + url + '" title="' + title + '">' +

title + '</a></li>';

i++;

}

output += '</ul>';

document.getElementById("popularPosts").innerHTML = output;

}

//-->

</script>

<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=6vhLQfPC3BGM7_

UDo_NLYQ&amp;_render=json&amp;_callback=topcontentCallback"></script>

Basically, this makes the pipe execute a JavaScript function on the web page by using a callback on

the JSON URL. To learn more about JSON, visit the Yahoo! Developer Network’s JSON overview at

http://developer.yahoo.com/common/json.html, or the ofcial home of JSON,