Catching the Facebook Login Event to change the HTML of the parent page

Question

I am trying to create Facebook based login using Javascript. Once a person clicks a button he should get a div replaced by another div, if he is logged in to Facebook. However, if he is not logged in to Facebook he is asked his Facebook credentials and he logs in. However, we need the user to click the button once more for the div replacement to happen in this case.

I want to know if there is a way in which I can catch the Facebook login event and change the div? Is polling a way or there is some other way out. I want to use only Javascript.

Answer 1

FB.Event.subscribe('auth.login',yourCallback);

There's also auth.sessionChange

The other events are listed here: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus

Answer 2

hey,

I have worked in facebook integration. I have written the tutorial on FB integration with any site.

Please check the link, hope this helps you.

Basically we need to Init Facebook, then on requireSession callback OR onStateChange callback you can call any JS function. Please look into the link for detailed JS functions for login, logout and callback. I also shown how to show standard FB friends invite popup dialog.

http://javalibs.techlads.com/2010/05/facebook-integration-in-your-web.html

Answer 3

If you are using the new sdk, you can use this :

  function FB_login(){
    FB.login(function(response){
        if (response.session) {
                //Change the div here.
        }
    });
  }

Otherwise, you can use Fb:login-button with onlogin attribute. (But this is the old method so It's better to use the first code)