This experiment started out as an excercise in using jQuery to fetch a JSON feed from Yahoo Pipes and then displaying it. In order to make it more interesting I decided to use Pipes to attempt to find a photo from Flickr for each entry in a twitter feed.

Step 1 – Fetching the Twitter data

Rather than just getting a static twitter feed, I thought it would be more useful to pass the Twitter username as an input parameter to the pipe. A quick glance at the Twitter API gave me everything I needed to know about retrieving a data stream for any username. I could have settled for using the RSS feed for the user but in order to also grab some data about the user I opted for getting the xml output. The url for this is http://twitter.com/statuses/user_timeline/[username].xml. 

To get the feed, I used a Text Input module to make the Twitter username a parameter that can be passed into the pipe. I used the String Builder module to add the username into the url string and then the URL Builder to convert the string into a URL object. Finally the Fetch Data module gets the data returned from the url. 

Step 2 – Getting an appropriate image

To get an image from flickr for each tweet, I used a series of loops. Firstly, for each tweet in the feed, I used the Term Extractor module to get the important keywords from the text, outputting them as a single string. The next loop takes each extracted terms string and replaced any spaces with ” OR ” to use as the search string e.g. “tree leaf” would be transformed into “tree OR leaf”.
The final loop uses the search string to get one image from Flickr and emit it as an additional element in the returned data stream.

View or copy the completed pipe here.

Step 3 – Fetching the data

jQuery is a good choice here as Pipes allows any pipe to return a JSON string and jQuery includes getJSON as an Ajax method.

I started with basic HTML to get the Twitter username and an empty div in which the results will be displayed:

<div id="input">
  <label for="Username">Twitter Username</label>
  <input id="Username" type="text" value="darthvader" />
  <input id="Load" type="button" value="Glorify the tweets" onclick="GrabTweets()" /></div>
<div id="feed"></div>

After adding the script tag to load the jQuery library I could add the javascript to grab the json output for the pipe. Pipes accepts parameters as a url parameter so in this case I needed to load: http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=TwitterUsername&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?
The resulting script looks a little like this:

function GrabTweets(){
  var TUser = $('#Username').val(); //get the value of the username input
  $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=' + TUser + '&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?',
    function(json){
//callback function to display the data here
    }
);
}

Step 4 – Presenting the data

I added a callback function for the getJSON call which sends the result to output_feed_items which loops through the first five items in the feed.

function GrabTweets(){
 var TUser = $('#Username').val();
 $("#feed").html('');
 var content = "";
 $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=' + TUser + '&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?',
 function(json){
 if(json.count > 0) {
 content = output_feed_items(json);
 } else {
 content = "The request did not return results.";
 }
 $("#feed").html(content);
 });
}

function output_feed_items(json) {
 var itemList = "";
 for (i=0;i<5;i++) {
 itemList += make_feed_desc(json.value.items[i], i);
 }
 return itemList;
}

The make_feed_desc function outputs the HTML for each item in the JSON feed. I’ve added classes to the elements to use as hooks for the CSS but to add the individual images returned from Flickr, I added an inline style declaration.

function make_feed_desc(item, item_id) {
 var itemElement = '';
 var bgimage = item.flickr['y:flickr'].img.replace('_m.jpg','.jpg');
 itemElement += '
<div id="item-' + item_id + '" class="item" style="background-image:url(' + bgimage + ')">';
 itemElement += '
<div class="talk">';
 itemElement += item.text + '</div>
';
 itemElement += '<a title="' + item.user.name + ' - ' + item.user.description + '" href="http://twitter.com/' + item.user.screen_name + '"><img class="profilepic" src="' + item.user.profile_image_url + '" alt="' + item.user.screen_name + ' / ' + item.user.name + '" /></a>';
 itemElement += '<a class="photocredit" title="' + item.flickr.title + '" href="' + item.flickr['y:flickr'].link + '">' + item.flickr['y:flickr'].link + '</a>';
 itemElement += '</div>
';
 return itemElement;
}

Finally I added a smattering of CSS to make the whole thing a little more presentable.

The Result

Live example here
download source

I may try to improve on this by building a Flickr search based on relevance to the keywords rather than the default module which is based on Flickr’s “interestingness” as the images returned, though very nice, often seem a little too removed from the subject of the tweet. Feel free to do whatever you like with the pipe or code, please drop me a line if you find it useful for anything.