Create a Simple Twitter Widget with YUI 3 and YQL

I have been working a lot with YUI3 at my day job lately. One of the coolest new things about YUI 3 is YQL. YQL has a ton of features, but the short version is that it standardize different api’s into one nice and easy to use format.

Today I thought I would do a little introduction to using YUI 3 by creating a simple twitter widget. Our widget will take your twitter username as an attribute and display your latest tweets all wrapped up in a nice little widget you can add to your sidebar. YUI3′s widget will allow us to package and organize our code nicely.

You can check out a demo of this tutorial: here.

Lets get started by first writing some basic html.

<!doctype html>
<head>
	<meta charset="utf-8">
	<title>Demo</title>
</head>
<body>
	<div id="tweets"></div>
</body>
</html>

Next we can create our widget

YUI().add('gallery-recentTweets', function(Y) {

    //base class (Widget) constructor
    function RecentTweets(config) {
        RecentTweets.superclass.constructor.apply(this, arguments);
    }

    RecentTweets.NAME = "recentTweets";

    RecentTweets.ATTRS = {
	username : {
		value: "boxmodeljunkie"
	},
	max : {
		value: 5,
		validator : function(val) {
			return Y.Lang.isNumber(val);
		}
	}
    };    

  //templates
  RecentTweets.TWEET_TEMPLATE = "<li>{tweet_text}</li>";

	Y.extend(RecentTweets, Y.Widget, {

		initializer : function() {
		},

		destructor : function() {
		},

		//dom manipulatoin
		renderUI : function() {
			this._addTweets();
		},

		//handle events
		bindUI : function() {
		},

		//sync changes
		syncUI : function() {
		},

		_addTweets : function() {
			var boundingBox = this.get("boundingBox"),
			      contentBox = this.get("contentBox"),
			      username = this.get('username'),
			      max = this.get('max');

			Y.YQL( 'select * from twitter.user.timeline( '+max+' ) where screen_name="@'+username+'"', function(r) {
				var results_set = r.query.results.statuses.status,
						html = '<ul>';
						Y.each(results_set, function(obj) {
							html += Y.substitute(RecentTweets.TWEET_TEMPLATE, {
														tweet_text: obj.text
														.replace(/(http\S+)/i,'<a href="$1" target="_blank">$1</a>')
														.replace(/(@)([a-z0-9_\-]+)/i,
															'<a href="http://twitter.com/$2" target="_blank">$1$2</a>')
														.replace(/(#)(\S+)/ig,
															'<a href="http://search.twitter.com/search' +
											                                '?q=%23$2" target="_blank">$1$2</a>')
														});
				});
				html += '</ul>';	

				contentBox.setContent(html);
			});

		}
	});

	Y.RecentTweets = RecentTweets;

}, '1.0', {require: ["widget", "substitute", "yql"]});

So, a little explanation. The main method to look at in out widget is: _addTweets. In _addTweets we use a YQL query to fetch our latest tweets, and then store them in the variable resultsSet. We then use an each statement to loop over the result. Inside of our each statement we use YUI3′s excellent substitute module to replace the variable in the TWEET_TEMPLATE we defined. We use replace to add links for @replies and hash tags. Then we add our html to a div on the page.

Now we can include YUI3 in our page and render our widget;

<!doctype html>
<html>
<title>Demo</title>

<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI({
	modules : {
		'gallery-recentTweets' : {
			fullpath : 'widget.js',
			requires : ['base', 'widget', 'substitute', 'yql']
		}
	}
}).use('node', 'gallery-recentTweets', function(Y) {

	//wait for domready
	Y.on('domready', function() {

		//create out widget
		widget = new Y.TweetApp.RecentTweets({
								username : 'boxmodeljunkie',
								max : 7
							});
		widget.render('#tweets');
	});

});
</script>
<body>
	<div id="tweets"></div>
</body>
</html>

and some css to make it look better:

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, Veranda;
	font-size: 12px;
	color: #575757;
}

#tweets {
	margin: 50px auto 0 auto;
	width: 300px;
	border: 1px solid #dbdbdb;
	background-color: #f1f1f1;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#tweets a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

#tweets ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#tweets ul li {
	padding: 12px 10px;
	border-bottom: 1px solid #b3b3b3;
}

#tweets ul li:last-child {border: none;}

About the author

Nate Smith has written 21 articles for Box Model Junkie

I am a 28 year old designer / developer from Peoria, IL who is very into PHP, WordPress, Django and jQuery. I have a huge passion for the web and love learning new things. You can follow me on twitter @imns81

3 Responses to "Create a Simple Twitter Widget with YUI 3 and YQL"

Beben Koben 09:21 PM 30/5/2011

YUI can be like it….awesome
thanks for tut my friend 8

Reply
Buat Info 01:27 PM 10/6/2011

good information, very helpful. Thanks..

Reply
Marc 08:09 AM 15/6/2011

I think it needs a polling function to update the list automatically in order for it to be really “twitter”.

Reply