Building the Realtime User Experience

Live Images

Until now, the widgets primarily show text updates in realtime. So in this widget we’re going to limit it to a realtime view of images that are streaming into Twitter at any given moment. To get this bit started, once again we’ll need to modify the Home.init method. Adjust yours to look like the following:

// Get everything started
Home.init = function() {
    // load the trending topics from twitter
    Home.appendJS('http://search.twitter.com/trends.json?callback=Home.catchTrends');
    // Start getting updates from friendfeed
    Home.getFriendFeedUpdates();

    // Start grabbing the images
    Home.getLiveImages();
};

Like the existing code in this method, this part just initializes the code for the live trending widget. The Home.getLiveImages method just starts searching Twitter for tweets with images:

Home.getLiveImages = function() {
    // search twitter for popular image hosting URLs
    var url = 'http://search.twitter.com/search.json?' +
                  'callback=Home.catchLiveImages&q=yfrog.com+OR+twitpic.com';
    url += "&since_id=" + Home.live_images_since_id;
    Home.appendJS(url);
	
    // set a timeout to run this method again
    setTimeout(Home.getLiveImages, 7000);
};

Much like Home.getTrendingTweets and Home.getFriendFeedUpdates, this method just starts a loop to make the same API request. To search for images on Twitter, we’ll simply search for tweets containing the domains of well-known image posting services. Twitpic and yfrog are both services that are commonly used by Twitter users to host images that are then ...