Parse Twitter & Facebook feeds with jQuery

This post simply demonstrates how to parse Twitter and Facebook feeds using jQuery. I’m utilizing a JavaScript equivalent of C# prototype methods which I had talked about in one of my earlier posts. Also, you’ll note that I’m using two different date/time jQuery plugins to make Twitter and Facebook date parsing a little easier. One of them is timeago and the other one is dateFormat. Although I had to put a condition to check if its IE as the dateFormat function was not playing nice with IE. Rest everything is pretty straight forward.

$(function () {
	$.ajax({
		url: 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=jesalg&trim_user=1&count=5&include_rts=1&callback=?',
		dataType: 'json',
		success: displayTwitterFeed
	});
	$.ajax({
		url: 'https://graph.facebook.com/calistolabs/feed?limit=5&access_token=XXXXXXXXXXXX|XXXXXXXXXXXXX|XXXXXXXXXXXXXXX&callback=?', //Replace with your own access token

		dataType: 'json',
		success: displayFacebookFeed
	});
});

function displayTwitterFeed(result) {
	var outputTemplate = "<p>{0}<br /> <small><a href=\"{1}\">{2} via {3}</a></small></p>";
	$.each(result, function (i, item) {
		var tweet = item.text.parseURL().parseUsername().parseHashtag();
		var createdAt = $.browser.msie ? item.created_at : $.timeago(dateFormat(item.created_at, "isoUtcDateTime"));
		var source = item.source;
		var tweetURL = "http://twitter.com/CalistoLabs/status/" + item.id_str;
		$("#TwitterFeed").append(outputTemplate.format(tweet, tweetURL, createdAt, source));
	});
}
function displayFacebookFeed(result) {
	var outputTemplate = "<p><strong><a href=\"{0}\">{1}</a></strong> {2}<br /><small>{3}</small></p>";
	$.each(result.data, function (i, item) {
		var username = item.from.name;
		var pageURL = "http://www.facebook.com/" + item.from.name.replace(/ /g, '');
		var date = $.browser.msie ? item.created_time : dateFormat(item.created_time.replace("+0000", ""), "dddd, mmmm dS, yyyy 'at' h:MM TT");
		var body = item.message;
		if (!body) {
			body = "<a href='" + item.link + "'>" + item.name + "</a><br/>" + item.description;
		}
		$("#FacebookFeed").append(outputTemplate.format(pageURL, username, body, date));
	});
}
String.prototype.parseURL = function () {
	return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function (url) {
		return url.link(url);
	});
};
String.prototype.parseUsername = function () {
	return this.replace(/[@]+[A-Za-z0-9-_]+/g, function (u) {
		var username = u.replace("@", "")
		return u.link("http://twitter.com/" + username);
	});
};
String.prototype.parseHashtag = function () {
	return this.replace(/[#]+[A-Za-z0-9-_]+/g, function (t) {
		var tag = t.replace("#", "%23")
		return t.link("http://search.twitter.com/search?q=" + tag);
	});
};
String.prototype.format = function () {
	var s = this,
        i = arguments.length;
	while (i--) {
		s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
	}
	return s;
};

Edit:

As of Friday June 3rd Facebook Graph API now requires a valid app or user access_token to access feed data: https://developers.facebook.com/blog/post/509/ You can get your access_token from from the Graph API Explorer and append it to your URL as a query string parameter as shown above.

Edit:

Found a workaround which would let us bypass the GraphAPI. See more details in my latest post. Basically instead of using a URL like this:

https://graph.facebook.com/calistolabs/feed?limit=5&access_token=XXXXXXXXXXXX|XXXXXXXXXXXXX|XXXXXXXXXXXXXXX&callback=?

we’ll switch it out for:

https://www.facebook.com/feeds/page.php?id=161821885215&format=json

If you have any questions or comments, please post them below. If you liked this post, you can share it with your followers or follow me on Twitter!