YUI+YQL Twitter example

This is an example of how to use the YUI library (YUI3) and Yahoo Query Language (YQL) to obtain a list of tweets from a user.

by Derek Gathright

HTML

<!-- Hacked together by Derek Gathright (@derek) -->

<div id="tweets"></div>

CSS

.tweet {
    background-color:#E0E9EF;
    margin:5px;
    padding:5px;
    border:2px groove #1671AA;
}

.tweet .tweet-image {
    float: left;
    width: 55px;
}

.tweet .tweet-body {
    position:relative;
    left:5px;
    top:5px;
}

.tweet .username {
    color:#1671AA;
    font-weight:bold;
}

.tweet .hashtag {
    color:#BF777A;
}

JavaScript

// 'node' and 'yql' are both YUI3 core modules that are available for import.

YUI().use('node', 'yql', function(Y) {
  
  // Specify the YQL query
  var query = "SELECT * FROM twitter.user.timeline WHERE screen_name='yuilibrary'";
  
  // Define the response handler that is executed when YQL responds with data
  var responseHandler = function(response) {
    var count, html = [], tweets, tweet;
    
    tweets = response.query.results.statuses.status;
    count = tweets.length;
    
    // Loop through each tweet
    for (var i = 0; i < count; i++) {

      // Snag the Tweet from the array
      tweet = tweets[i];

      // Some regex's to format the content in the tweet
      tweet.text = tweet.text.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1<\/a>');
      tweet.text = tweet.text.replace(/@([a-zA-Z0-9_]+)/gi, '<a href="http://twitter.com/$1" target="_blank" class="username">@$1<\/a>');
      tweet.text = tweet.text.replace(/#([a-zA-Z0-9_]+)/gi, '<a href="http://search.twitter.com/search?q=%23$1" target="_blank" class="hashtag">#$1<\/a>');

      // Create the HTML for each tweet
      html.push("<div class='tweet'>");
      html.push(" <div>");
      html.push("  <a class='tweet-image' href=''><img src='" + tweet.user.profile_image_url + "' height='50' width='50'></a>");
      html.push(" </div>");
      html.push(" <div class='tweet-body'>");
      html.push("  <a href='http://twitter.com/" + tweet.user.screen_name + "' class='username' target='_blank'>" + tweet.user.screen_name + "</a>: " + tweet.text + "");
      html.push(" </div>");
      html.push(" <div style='clear:both'></div>");
      html.push("</div>");
      
    };

    // Smoosh the HTML together
    html = html.join('');
    
    // Insert it into the #tweets node
    Y.one("#tweets").set("innerHTML", html);
  }
  
  // Execute the query
  new Y.YQL(query, responseHandler);

});