Facebook Platform updates – w00t!
According to this blog post over at developers.facebook.com, some exciting changes are coming to the Facebook Platform.
I'm a little slow on the uptake here, the blog update I'm referring to is now 10 days old. I haven't been in the Facebook dev world of late, so I hope you'll forgive me for regurgitating old news.
The big update for me is in the 4th paragraph:
We are also moving toward IFrames instead of FBML for both canvas applications and Page tabs. As a part of this process, we will be standardizing on a small set of core FBML tags that will work with both applications on Facebook and external Web pages via our JavaScript SDK, effectively eliminating the technical difference between developing an application on and off Facebook.com.
This is excellent! I have actually been holding my breath for something like this for a while now. The restriction of FBML only content for tabs has been extremely restrictive, here are a handful of reasons why:
- Very strict HTML parsing - because the Platform was rendering tabs inline previously, it of course had to be VERY careful in how it handled offsite data, to protect users from all manner of scams/attacks. Now full flexibility is available because your iFrame is yours to control.
- Insanely strict JS parsing - same as first point, application tabs could only leverage basic Javascript and the unwieldy, poorly documented FBJS (Facebook Javascript). Now, you're free to access manipulate your IFrame document/window objects, DOM manipulate, include third party JS libs, etc, all to your hearts content.
- Embedded media was a pain - Granted, the tab FBML *did* allow you to embed Flash and AIR apps etc, but there were countless threads on the forum outlining issues they were having interacting with the host page, etc.
- Tab activation policies - There were some extremely frustrating rules with the way tabs were allowed to be "activated". No JS/FBJS was allowed to execute until the user had interacted with the tab in some manner, such as focusing a form element or clicking somewhere. This made it very cumbersome to implement any meaningful interactions with the user; alot of obnoxious boilerplate code had to be written for various ways in which you may actually start doing anything meaningful from JS, like AJAX requests.
- ... and lots more Everything from CSS parsing to the occasional time where the tab would just sit in an endless loading display when clicked. When I was writing a tab page I remember bashing my head against the wall trying to get some content to sit nicely in a cross browser fashion... it would have been easy under normal circumstances, but the Platform tab flavour was refusing to accept the *display: inline IE hack in the CSS. Joy.
This is going to really open up some great possibilities for interactive, rich web applications. I really cannot wait for this feature to be rolled out.
This news does come with some disappointment however; the sixth paragraph on the developers blog states the following:
Finally, due to low usage rates, we will remove application tabs from user profiles in the next couple months. Application tabs will continue to be supported on Facebook Pages.
There are plenty of great use cases to have application tabs on a user profile page. My personal Facebook profile has a tab that displays my latest last.fm scrobbles, my latest blog posts, etc. Personally, I believe that if the adoption rate for user profile tabs is low, the Facebook team should be coming up with ways to increase user acceptance of this feature, rather than removing it all together. Besides, the functionality in Facebook Page tabs is pretty much identical to the user profile equivalents... Why not support both?
There's other goodies in the developer blog update too, such as cleaning up the REST API considerably.
All in all, exciting changes coming to the Facebook platform in the coming months!
Spring Roo
So I stumbled across Spring Roo a couple of times recently and haven't really looked into it much. I finally decided to do a little bit of reading on it, starting here. It seems like a pretty fascinating tool, providing intelligent tools to help develop an application without layering any actual IDE requirements, runtime libraries, bloated annotation models into the mix. I'm also especially interested to see exactly how this works in practice with Google Web Toolkit, as it could provide a very powerful framework to develop rich web client functionality and robust backend datastore+business logic facades very rapidly.
When I get a bit of time soon I'm definitely gonna check this out further and post more thoughts on it.
Gotcha: Removing iframe border in IE.
Think I'm gonna start a little mini-series of blog posts with the little "gotchas" I run into during the course of an ordinary day at work. Some of the pitfalls I've run into lately have been ridiculous. Bloody IE!
Todays one is a fun one. Removing a frameborder on an iframe in Internet Explorer is case-sensitive, would you believe it!
That is to say:
<iframe frameborder="0" src="http://www.google.com.au/"></iframe>
.. Probably won't work. Whereas:
<iframe frameBorder="0" src="http://www.google.com.au/"></iframe>
Will!
This also extends to creating an iframe using DOM. You need to do this:
Think I'm gonna start a little mini-series of blog posts with the little "gotchas" I run into during the course of an ordinary day at work. Some of the pitfalls I've run into lately have been ridiculous. Bloody IE!
Todays one is a fun one. Removing a frameborder on an iframe in Internet Explorer is case-sensitive, would you believe it!
That is to say:
myIframeEl.setAttribute("frameborder", "0");
Is not going to work in IE.
myIframeEl.setAttribute("frameBorder", "0");
But this will.
Facebook Access Tokens from Canvas Apps
UPDATE 26/07/10: looks like the Facebook Platform team is addressing this issue presently. There's a new migration option available to send session data in the request. When I used this parameter it seems that all old session related fb_sig parameters were no longer being sent, so I'd probably avoid using this. Instead refactor your applications to use the new OAuth support for Canvas apps, which is also available to enable in the App Settings Migration tab.
There's an open bug over at the Facebook bug tracker detailing an issue people are having with Canvas pages and the new Graph API. Right now, Facebook canvas applications are posting a session_key to the canvas callback URL. The new OAuth system of course uses the access token system, rather than the session_keys from the old Rest API.
There's a bit of info hiding in the documentation upgrade guide that outlines how to "exchange" a session key for an access token. All you need to do is POST some info to an endpoint and it'll spit back a valid access token.
Like so:
$ch = curl_init("https://graph.facebook.com/oauth/exchange_sessions");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, array(
"type" => "client_cred",
"client_id" => "<your canvas application id>",
"client_secret" => "<your canvas application secret>",
"sessions" => $_REQUEST["fb_sig_session_key"]
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = json_decode(curl_exec($ch));
$accessToken = $result[0]->access_token;
So what's going on here? You're POSTing a request to the Facebook OAuth implementation to exchange your session key for an access token. You provide your application id and secret (important: this needs to be id and secret for the canvas application the request originated from of course) and the session ID of the user. Send this off and a JSON response will come back with the access token. Also, if needed, there's another property passed back - "expires", which will let you know when this access token will die.
Okay, so now you have an access token for use with the new API. Now what?
There's a little bit of fudging required to use this with the PHP SDK. The setSession() method of the PHP SDK doesn't just take an access token, it expects all the other crap that is usually contained in the cookie it saves. The idea behind my solution is that you shouldn't need to modify any base classes. The code below will con the Facebook library into accepting your newly acquired access token:
$session = array(
"uid" => "",
"session_key" => "",
"secret" => "",
"access_token" => $accessToken
);
ksort($session);
$sessionStr = "";
foreach($session as $sessionKey => $sessionValue) $sessionStr .= implode("=", array($sessionKey, $sessionValue));
$session["sig"] = md5($sessionStr."<your app secret>");
$facebook->setSession($session, false);
What this code is doing is constructing a fake session object. Since the only thing the SDK actually looks at in this session data is the access_token, we just fill the other entries with an empty str. Once this is done, we just calculate a signature for the data, as per the Facebook Wiki documentation. Again, we're only doing this because the setSession() method demands it.
Once this is done, you can go ahead and make api calls! Now wasn't that easy? 
Also, as a little footnote, you should know that you don't actually have to fudge the session, you can just pass the access token you get into each api call, like so:
$facebook->api(array("method" => "stream.get", "access_token" => $accessToken));
... But this is a bit cumbersome. Also, with the fake session, you can just remove my code later when Facebook starts sending access token in the initial POST data.
You can see this solution in action at this Facebook page. Just click grant access, then click Go.
Hope this helps someone!
The Facebook Platform
Over the past few days I've immersed myself in the engaging, complex, diverse, exciting and downright confusing land of Facebook development. I'm currently writing a WordPress plugin that integrates a blog fairly extensively into a Facebook Profile Tab. With the bulk of the functionality now written, I can step back and reflect on the experience as a whole. I'm now going to post some thoughts on it.
In a word - wow. The process has very much been a rollercoaster ride, let me tell you. I picked a bad time to launch into this project - Facebook is in the process of transitioning from "Facebook Connect" to the new Graph/"Facebook Platform/Open Graph/whatever branding, bringing a slew of new APIs, SDKs, and other changes along with it. For example, right now if you visit the Facebook Developers website, they're trying to rework all the documentation, hiding the original Developers Wiki in the process, leaving a HUGE gap in the documentation in the process.
Further, right now the Platform as a whole is riddled with inconsistencies in terminology and functionality. What's worse is the transitory phase is obviously quite involved, and there's bugs all over the place.
That being said, the Platform is a pretty sexy wonderland of functionality. When I wasn't encountering odd issues or server latency dramas, it was pretty cool to work with such a diverse environment. That being said, I haven't actually worked with the Graph API much yet - the application I wrote needed to be integrated into a profile tab, which still only supports FBML/FBJS - no iframe support yet.
I'm going to be posting alot of articles here over the coming weeks/months with nifty things I've discovered and "gotchas" I've worked around in the land of Facebook. Also, I'll be putting more info up here soon for the plugin I'm developing that I mentioned earlier, currently dubbed "Faceblog" - not sure if I'm gonna have troubles with this name yet 
Stay tuned!
Categories
- Chrome Extension Development (1)
- CSS (2)
- Facebook Development (5)
- Games (1)
- half-assed album reviews (1)
- Hibernate (1)
- Javascript (4)
- Music (4)
- Personal (7)
- Programming (5)
- Technology (20)
- Uncategorized (8)
- Web (8)
- Web Development (5)
My Links
- My Facebook Profile Friend me on Facebook!
- My Google Profile Assimilate. Assimilate. Assimilate. Assimilate.
- My Last.fm Profile Check out what I’m currently listening to.
- My Twitter Follow me on Twitter.