// '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);
});
<!-- Hacked together by Derek Gathright (@derek) -->
<div id="tweets"></div>
.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;
}