jesal gadhia » javascript

Parse Twitter & Facebook feeds with jQuery

Thu, 20 Jan 2011 22:29:26 +0000

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 = "{0}
 {2} via {3}";
	$.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 = "{1} {2}
{3}";
	$.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 = "" + item.name + "
" + 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.

Cross-Domain Communication with IFrames

Tue, 21 Dec 2010 21:18:29 +0000

Recently I encountered a situation where I had to communicate between an iframe located on a different domain and its parent. Due to the “same origin policy”, a security concept for browsers, which only permits scripts running on pages originating from the same site, this was not possible to do right out of the box. After some Googling, I learned there were a couple of workarounds for it. You could use dynamic script tags included from external domains aka JSONP or use postMessage or the IFrame URL technique. All of these solutions are quite hackish or complicated and not 100% secure. Luckily I found this nice little library called easyXDM.

At the core easyXDM provides a transport stack capable of passing string based messages between two windows, a consumer (the main document) and a provider (a document included using an iframe). It does this by using one of several available techniques, always selecting the most efficient one for the current browser. For all implementations the transport stack offers bi-directionality, reliability, queueing and sender-verification.

Here’s a small test I created. It calls a function to scroll the page up from the remote site. Local and remote directories represent the servers where the files will be residing on.

local/methods.html



    
        easyXDM

remote/remotemethods.html



    
        easyXDM

remote/name.html

You can find lot more examples and documentation on easyXDM’s website.

CSS Browser Selector

Sun, 23 Sep 2007 04:04:45 +0000

CSS Browser Selector is a lifesaver when it comes to creating cross-browser compatible layouts with CSS.

Check it out here – http://rafael.adm.br/css_browser_selector/

Although its something people should avoid overusing, its an invaluable tool for fixing some of those stubborn CSS inconsistencies between different browsers.