Sunday, May 2, 2010

Facebook login button

This post is about the agony facebook makes its developer goes through with inadequate documentation, poor linking of pages and alien language (xfbml) which never behaves the I expect it to. Anyway this is how I got facebook login working on my site.
Problem: I used the facebook login on my site http://fewbs.com/login. It appeared fine and easily but the popup which opened for login never closed and opened the root of my site.
Solutions on web:
1. Most of them used receiver_htm file in the FB.init which I was not using so it was quite confusing whether or not I was doing the right thing.
2. Some said that fb:login-button takes onlogin attribute which really helped me take the next step
3. Others said that onlogin method should take "document.location.href=document.location.href". This did not work for me.
My solution:
A combination and a variant of the above solutions here :-
Use the code below at the bottom of your page in script tags

window.onload = function(){
FB.init({appId: 'xxxxxxxxx', status: true, cookie: true,xfbml: true});
}
function doFBLogin()
{
FB.api('/me', function(response) {
//your code here
});
}

Use the codebelow to place the login button.
<fb:login-button onlogin="doFBLogin();"></fb:login-button>

There are couple of other options for fb:login-button which can be found here
http://wiki.developers.facebook.com/index.php/Fb:login-

UPDATE: I think the login popup closes automatically if it finds any meaningful JS expressions in the onlogin attribute.