Create a Simple Twitter Widget with YUI 3 and YQL

A once a week, free newsletter with handpicked Web Design, Development and Freelance jobs.

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

A once a week, free newsletter with handpicked Web Design, Development and Freelance jobs.

S

h

a

r

e

  • Share this post on Delicious
  • StumbleUpon this post
  • Share this post on Digg
  • Tweet about this post
  • Share this post on Mixx
  • Share this post on Technorati
  • Share this post on Facebook
  • Share this post on NewsVine
  • Share this post on Reddit
  • Share this post on Google
  • Share this post on LinkedIn

About the author

Nate Smith has written 26 articles for Box Model Junkie

I am a 32 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

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

    good information, very helpful. Thanks..

  • 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”.

About

Box Model Junkie is a site addicted to Front-end / UI development. We focus on tutorial relating to JavaScript frameworks, CSS3 and HTML5.