The facebook Graph API has a nice Javascript SDK to build applications using JS. The most important benefit is that with JS you could tightly integrate the Facebook Graph API with your web application.
Integration is quite easy. First we add a fbAsyncInit object to the window object for asynchronous initiating. The following code snippet was borrowed from the official docs and then slightly modified:
window.fbAsyncInit = function() {
FB.init({appId: appId, status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login() {
alert('login');
}
function logout() {
alert('logout');
}Thanks to the elegance of Javascript, we called the newly constructed object immediately after initiating, with a callback that loaded the JS sdk on our page. We registered the auth.login, auth.logout events and for initially looking for any logged in user, we made the getLoginStatus() call. In fact this code snippet initiates the facebook access on the page. Registering the events to our custom functions, we just made sure that, we know when something important happens. While iniating, if the user is already logged in, the login() function gets called because of the getLoginStatus() call. Later, after initiating, if the user logs in or logs out, the auth.login and auth.logout events get fired. Our registered handlers will be called in those cases.
To make things easy for the end user, you can use a fb:login-button tag from FBML. I believe Facebook app developers are already aware of that. Still, I was just reminding that you can still use those tags 
A login button is going to help you. Because, it’s mandatory that you call the FB.login() on an user event (like button click) because most browsers won’t allow opening a popup on a non-user event.
Now the user is logged in and authorized the apps, you can start customizing your contents for the user. You can always check for available users by calling the FB.getSession() function. It returns null if no user is available, otherwise, it returns a session object with access_token, app key and secret and most importantly the user uid.
session = FB.getSession()
if(session) {
alert(session.uid);
} else {
alert('no user logged in');
}You can use the dir() function on the session object to explore it on the Firebug console.
Now, you can make calls to the Graph API using the normal path pattern:
FB.api("/me/photos", function(response) { alert(response.data[0].link) });The above code will alert() the user’s latest photo URI. Well, make sure that the applicaton has permissions to make the calls.
You can even mix up with the legacy API by passing an object with a “method” parameter pointing to the method name and related args. You can build the Facbook UIs using the FB.ui() call. Have a look how we use legacy API and UI to build a nifty sharing dialog box.
var share = {
method: 'stream.share',
u: 'http://masnun.com/'
};
FB.ui(share, function(response) { console.log(response); });Here, instead of alert()ing the response, we logged it to the console
In this way, you can interact with the user the way you want. It’s plain and simple. So, start digging now and have fun.
The Offcial js-sdk docs can be found here: http://developers.facebook.com/docs/reference/javascript/
Happy developing! Happy Facebooking!
We are done. That completes the integration. Now we can load any Zend component inside our controllers. Let’s make our hands dirty by modifying the default welcome controller. Open the “system/application/controllers/welcome.php” and put the following contents: