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!

I downloaded the php-sdk and started off. But soon, I faced problem. The php-sdk is not well documented (in my opinion) and I had a very hard time figuring things out. It became even worse when I failed to test some of the features which are tightly integrated deep inside facebook. For example, I couldn’t find a way to construct some advanced URLs and also the sdk was not suitable for my debugging needs. The sdk is not poor, I later found it out to be strong but the main problem is it’s not much documented.

So, to try out things and to figure out how the Facebook OAuth works, I started writing my own codes. That helped though I struggled a bit to setup permissions. When I saw that the code is working fine, I chose to pack it up in a class file and rewrite the testing environment.

It took me 30 minutes to rewrite everything up. The package now contains the library and a console to test different methods.

You can download it from: http://masnun.googlecode.com/files/facebook-graph_API-oauth.zip

Extract it into a directory on your website. Register a facebook application. Go through the traditional setup. Please remember to add your domain name on the Connect tab of the application you created Edit the config.php and visit the index.php using your browser. You’ll be redirected to Facebook without a word. When you authorize and return, you get a fine console to test things out and see for yourself!

Lets see a quick intro to the library (facebook.php)

Facebook requires you to redirect the user to an authorization URL with your client id and the callback url. So, we first do this:

// Construct a Facebook object with your app id and secret
$facebook = new Facebook($client_id, $client_secret);
// Get the authorization url. $perms is an array of extended permission. See config.php
$url = $facebook->getAuthorizeUrl($callback_url, $perms);
// Redirect the user to that url
header("Location: {$url} ");

You have to ask for permissions on Authorization. I couldn’t get to make the user extend permissions on the post authorization phase. So, I have included **ALL** available permissions in the config.php. Permission is what I suffered with most. If you use my library, it’ll ask the user for all permissions so that you can test everything out. I know you won’t need all those permissions in production environment. Just comment out the ones you don’t want!

Facebook returns the user to the $callback_url with a GET parameter named “code” with others. By using this code with the application secret and callback url, we can get the access_token for the user We can do that easily using the client :

$facebook = new Facebook($client_id, $client_secret);
$data = $facebook->getAccessToken($callback_url, $code);
$facebook->setAccessToken($data['access_token']);
$response = $facebook->call_api("/me/feed", "post", "message=Hello, Facebook!");
print_r($response);

getAccessToken() retrieves the access_token from the facebook server. setAccessToken() adds the token to the facebook object and makes it ready to make api calls.

The $data is an array with the keys – access_token and expires. After we set the access token, we can make API calls from the client. For the details on API Paths, please visit: http://developers.facebook.com/docs/api

I really liked the new structure of the facebook API. The previous API was bloated and sometimes very hard to implement. I do thank Facebook very much for making things easy for the developers!

I have been thinking of adding some sort of social interaction to it for a long time but never I got that much time. Today afternoon, I felt a dashing urge to do something with the facebook developers API. I started learning the basics of the API and soon gathered adequate knowledge to start writing an app. But I couldn’t come up with a good idea to implement. So I chose to integrate facebook with my mobile site.

First of all, I went through the R&D to find out which API calls I might need. Hopefully, there were only a few those would be required for what I wanted to do. So I registered a new app and fired off into coding.

The design is very simple. The app would collect the user’s unique facebook user ID and store in my database against a JOTIL21 username. You have to perform this linking action using your J21 ID and Password. Once your credentials are verified, your unique facebook id is stored into my database and linked with the corresponding J21 ID.

Now, to let J21 update your status for you, you need to allow special “extended permission”. So after successful link up, you’re provided with an URL to authorize that bit. Now, you’re totally done.

For this I used the official php5 facebook client library and used iframe as the default rendering method. The client uses an user’s unique facebook ID to to update his status using the $facebook->users_setStatus(“Status”,”Facebook_User_ID”) method.

It was really cool but looks like I am forgetting WML coding these days. Had to mess up a lot with the syntax. But finally, it’s running fine. It’s still in a beta mode, just a proof-of-concept that WML apps can have facebook connection as well.

Well, enough of that today. Gotta go for Iftari… Hope to write more on these topics really soon

There’s an additional “web search” option that lets you search the web from inside Facebook. This very search engine is being powered by Microsoft’s Bing.com.

Bing.com claims itself to be a decision engine that replaced the old Live search. I don’t know why Facebook went for Bing, may be Microsoft has negotiated to popularize Bing by interacting with the best social networking site on the internet.

Let’s see how far Bing and Facebook goes together.