Checkpoint 1: The Login Button - littleq0903/fb-js-codelab GitHub Wiki

First of all, we need to defined a container, for placing our UI part such as login button in it, so we could just put a container right after the FB SDK initialization script tag:

<div id="my-html-playground" class="container">
</div>

And in the #my-html-playground, we could put the button and a p tag there, the button is for triggering the login event, and the p tag is for showing the message to notify user "you're already connected to FB API".

So let's put the following text in #my-html-playground:

<div id="my-login-control" class="well">
    <button id="my-login-button" class="btn btn-primary">Login with Facebook</button>
    <p id="my-login-message"></p>
</div>

You could just care the id part, the classes are for making the webpage looks more beautiful with Twitter Bootstrap, so now you'll have a #my-login-button button and a #my-login-message paragraph tag.

Okay, we're going to write some JavaScript right now.

We need to define a function and call it when SDK is loaded, to ensure the SDK loaded, we couldn't use the traditional approach like window.onload or $(function(){}), if you're doing like this way, your function will be called before the SDK is loaded, then the JavaScript console will tell you "FB is undefined".

So the best way is to call it right after FB.init(), at that moment we could ensure the SDK is loaded because we already got init() from FB there.

Before the body closing tag, </body>, add a script tag and give it an id my-script-playground, we will use it repetitively.

<script id="my-script-playground">
</script>

and in it, we defined a function which is called fbLoaded and put in under window namespace in order to call it easily.

window.fbLoaded = function () {
    // this function will be invoked after the FB.init().
}

and call it right after FB.init()

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
    appId      : FacebookAppId,                        // App ID from the app dashboard
    cookie     : true,                                 // Allowed server-side to fetch fb auth cookie
    status     : true,                                 // Check Facebook Login status
    xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
    window.fbLoaded();
};

For doing something after user logged in, we need to subscribe the login event, to know when the user has been logged in and doing something to welcome them.

We use FB.Event.subscribe(event, callback), the event argument here is just a string, the name of the event, the list of global events you could find out them here (FB.Event.subscribe page), and the callback is just a function which will accept the first argument as API response from Facebook.

The event name of login is "auth.login", and in the event callback we could show something in the p tag we defined beforehand.

So it will be like this:

// define the events when login status changed.
FB.Event.subscribe('auth.login', function(response) {
    // when user has been logged in, this block will be triggered.
    var msg = "You're logged in.";
    $("#my-login-message").html(msg);
    // print out the response in the console.
    console.log("Your login response:");
    console.log(response);
});

And we could call FB.login() to ask FB SDK to invoke the authentication progress, the user will see a pop-up after this function has been fired, this progress redirect user to the Facebook web page to enter their credentials and back the result to your 'auth.login' subscriber, the result will be in response.

For binding it to #my-login-button's click event, we could do:

// define the action when user clicked the login button.
$("#my-login-button").click(function(){
    FB.login();
});

Click the login button in your webpage, you will see a popup, this will only show up one time if user keep logged in in your app.

(Some browsers will block pop-up, remember to disable the pop-up block for your webpage in order to get it worked.)