Question

I am working an a test page to get the Facebook login button functionality correct.

I got the FB button to work correctly when the person logs in and logs out of FB. But I am not sure how to get my sites’ header to update to toggle the login/logout link.

After the FB loging/logout I update the site’s session with all the same data as I would during regular login/logout, but for some reason the header does not update there.

Any idea how to fix it? FYI I am testing this stuff out here: http://www.comehike.com/test_fb_connect.php

Answer 1

Well, for that you would have to use Facebook’s Javascript API to detect when the user has logged in or logged out, and then do an AJAX request for updating your header. This would be done through FB.Event.subscribe, as the following snippet points out:

window.fbAsyncInit = function() {
    FB.init({
        appId  : 'YOURAPPID',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true,  // parse XFBML
        channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
        oauth : true //enables OAuth 2.0
    });

    // retrieve the login status.
    FB.getLoginStatus(function(response) {
        if (response.authResponse) update_user_is_connected();
        else update_user_is_not_connected();
    });

    // This will be triggered as soon as the user logs into Facebook (through your site)
    FB.Event.subscribe('auth.login', function(response) {
        // Here you would update your header.
        update_user_is_connected();
    });
};

You can read more about FB.Event.subscribe here: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

Please note this code is taken from previous answers of mine.