Court 's YQL/YUI3/Twitter example

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

by kizer

HTML

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

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
 font-size: 100%;
   background: #e2e2e2; 
}

.tweet {
    background-color:#E0E9EF;
    margin:5px;
    padding:5px;
    border:1px solid #333;
    font-size: 14px;
    text-shadow: #FFF 0 1px 0;
    border-radius: 5px;
    -webkit-box-shadow:
        rgba(255,255,255,.8789) 0px 1px 0px inset,
        rgba(0,0,0, .2459) 0px 0px 5px;
    -moz-box-shadow:
        rgba(255,255,255,.8789) 0px 1px 0px inset;
}

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

img {
     border-radius: 4px;   
}

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

.tweet .username {
    color:#212121;
    font-weight:bold;
    text-decoration: none;
}

.tweet .hashtag {
    color:#fff;
}

tweet-body a a {
color #fff;
}

JavaScript

YUI({
  modules: {
    'gallery-yql': { //Include the YQL module, needed for our query to get the Tweets
      fullpath: 'http://yui.yahooapis.com/gallery-2010.01.27-20/build/gallery-yql/gallery-yql-min.js',
      requires: ['get','event-custom'],
    }
  }
}).use('node', 'gallery-yql', function(Y) {
    new Y.yql("select * from twitter.search where q='from:mantia'", function(response) {
        var html    = [];
        
        if (response.query.results) {
            var tweets    = response.query.results.results;
            var count    = tweets.length;

            // Loop through each tweet
            for(var i=0; i < count; i++) {

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

                // Some regex's to format the Tweet a little better
                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.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.from_user + "' class='username' target='_blank'>" + tweet.from_user + "</a>: " + tweet.text + "");
                html.push(" </div>");
                html.push(" <div style='clear:both'></div>");
                html.push("</div>");
    
            }    

        ...