// '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; }