Unobtrusive Twitter & Delicious Feeds using MooTools

It has become commonplace to include things such as Twitter status updates and Delicious bookmarks on your blog/website. But if you're like me, you don’t particularly enjoy pasting JavaScript directly into your lovingly–crafted HTML markup. So instead of simply using the pre–baked solutions that Twitter and Delicious offer on their own websites, I like to ‘roll my own’ using MooTools. You can see a working example here.

To do this, you will need to visit the MooTools website and download MooTools Core and MooTools More. Make sure you include the Request.JSONP class in the More builder. Next, include references to these files in the header section of your HTML page:

<script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2.2.2-more.js"></script>

Now, insert the following HTML into the body of your web page. It's important that we do not assume a visitor has JavaScript enabled, so our basic HTML is a simple link to each respected page. We will replace these links with status updates and bookmarks for the people who do have JavaScript. Make sure to insert your username in the URL's where needed:

<ul id="twitter-post">
	<li><a href="http://twitter.com/username">View my Twitter updates</a></li>
</ul>

<ul id="delicious-links">
	<li><a href="http://delicious.com/username">View my Delicious bookmarks</a></li>
</ul>

Finally, you need to create an external JavaScript file and include it in the HTML header underneath your MooTools includes:

<script type="text/javascript" src="myscript.js"></script>

The code for the JavaScript file is as follows. Again, make sure you insert your username where needed:

window.addEvent('domready', function() {

	//Twitter JSONP request
	var myTwitterRequest = new Request.JSONP({
		url: 'http://twitter.com/statuses/user_timeline/username.json',
		data: {
			count: '3'
		},
		noCache: true,
		onComplete: function(myTweets) {
			var el = document.id('twitter-post');
			el.empty();
			myTweets.each(function(tweet) {
				var myElement = new Element('li',{
					html:  '<p>' + tweet.text + '</p>'
				}).injectInside('twitter-post');

			});
		}
	}).send();

	//Delicious JSONP request
	var myDeliciousRequest = new Request.JSONP({
		url: 'http://feeds.delicious.com/v2/json/username',
		data: {
			count: '3'
		},
		noCache: true,
		onComplete: function(myBookmarks) {
			var el = document.id('delicious-links');
			el.empty();
			myBookmarks.each(function(bookmark) {
				var myElement = new Element('li',{
					html:  '<a href="' + bookmark.u + '">' + bookmark.d + '</a><p>' + bookmark.n + '</p>'
				}).injectInside('delicious-links');
			});
		}
	}).send();
});

That's all that is needed - you now have a simple, unobtrusive solution that also gives you a lot of flexibility in terms of customization. The examples used here are pretty basic, but you can do many different things to control the appearance and format of the returned data.