Parse Twitter & Facebook feeds with jQuery
20 Jan 2011This 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