I thought a good test for it would be to create two proof of concept “controls” (I’ll call them that but I essentially mean reusable encapsulated Html/JS files). The first would be a login control for logging in to Facebook, the second a simple feed control to display the contents of your wall. Both would make use of the Facebook Graph API.
To cut a long story short, here’s the Html page I ended up with to host these simple controls:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div id="fbLoginControl" data-bind="fbLoginControl: fbLoginControlViewModel"></div>
<div id="fbFeedControl" data-bind="fbFeedControl: fbFeedControlViewModel"></div>
I’ve wrapped all of this into a zip that you can download here. I’ve included the JS libraries instead of linking to the relevant CDN-hosted files because perhaps the hardest aspect of this experiment was getting the correct combination of script versions.
For it to work you need to open js/config.js and enter your Graph API key. You also need to make sure that the Web Site/Site Url property of your Facebook app is correctly set. Make sure you remember to include a trailing “/” at the end of the Url.
Rather than write a lengthy explanation of how it all works I’ll rely on your own powers of deduction as it’s not rocket science. And anyway, the documentation on the KnockoutJS site is exemplary. Please feel free to ask questions in the comments. :-)
One caveat: It works great in Chrome, Firefox and IE6, but there’s something going wrong in IE9 Beta.