HTML (just a login button and a div for the response)
<button id="loginBtn">Facebook Login</button> <div id="response"></div>
Of course there is room for improvement (there always is), but i am just trying to explain when (and how) you should use FB.login and FB.getLoginStatus. For example, you should hide the login button with CSS, right now it shows up for a short time and disappears if the user is authorized already – because it takes some time until the callback function of FB.getLoginStatus gets called. You could also use the Social Plugin for the Login Button, but i guess you want to use your own design so that´s not an option in most cases.
FB.login: FB.login opens the authorization window where users can authorize your App. It must get called directly on user interaction (mouse click), you can´t call it right after FB.init and you can´t call it in the asynchronous callback function of FB.getLoginStatus either. Make sure you understand what asynchronous means, it´s very important to know for a web developer. If you don´t call it on user interaction, it may get blocked by popup blockers. The benefit of using FB.login for authorization is that you don´t need to redirect the user to a login screen – the PHP SDK does not offer that kind of usability.
FB.api: This is actually not about the login process anymore, it´s just a basic API call to get the basic user data in the example. FB.api can only be used after FB.init. Should be obvious though, you can´t use the API before initializing the SDK.
return_scopes: Asking for permissions in the authorization process is not a sure thing. The user can just deselect the email permission in the authorization popup, for example. It´s quite easy to check for the authorized permissions by setting return_scopes in FB.login, as you can see in the code. If you add that parameter, you will get a list of all granted permissions in the grantedScopes field of response.authResponse.
That´s it, if you got any improvement tips or find any errors, feel free to comment 🙂 – here are some links to the Facebook docs, if you need more information: