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:
I try to use like what you did in your article.
But i get this error, “Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.”
Do you know why it gave such error?
Thanks for your explanation.
you need to add one of the platforms in the app settings, with your url.
Hello, all this website was actually extremely useful. Still there’s a couple of things I’d like to know.
1. Can you suggest a way I can redirect the users to an “HTML2” page after he logged in on “HTML1” page?
Sorry for bothering and thanks for all your help, you’ve already helped a lot a newbie to understand all this stuff 🙂
another blogpost of mine may help you with the second question, just make sure to activate appsecret_proof: http://www.devils-heaven.com/facebook-php-sdk-4-0-tutorial/
This is preety neat. I have a slight issue I’m using this mostly like it is here, however, it’s not working on firefox/safari on mobile. Any idea why? (note: the site is a mobile oriented/responsive site I’m making and it works wonderfully on chrome and android chrome however Firefox/safari are not as friendly)
i am afraid there is not enough information to help you in a serious way, to be honest. i suggest posting your question on stackoverflow (feel free to post a link to the thread in here), with all the neccessary details (your login code, a test link, …)
How we can retrieve user email and photo using api with your code ?
I tried retrieving user info but , I am not getting any user data expect user id and user name …
check out the official changelog for v2.4 of the graph api, search for “declarative fields”. that will answer your question.
How would you go about solving this for isomorphic applications?
My understanding is that the async loading of the FB code means that the server code is different from the client one, therefore breaking the isomorphism.
Indeed, I didn’t mean that the code should be identical, only the HTML code that was produced should be the same, to benefit from the react rendering.
I used your code with very little changes and it worked beautifully for what I needed. Thank you! Only thing is where I put the code is down a bit on the page and when I open the page it jumps down to that section – like a hyperlink is re-positioning it. Do you have any idea why that would happen? Thanks again for the code.
This facebook developer page gives a complete example of logging in: https://developers.facebook.com/docs/facebook-login/web
i know, they improved the docs a lot since i wrote this article. although, i prefer my example, it works since many years and is easy to understand 🙂
– you can´t call it right after FB.init
– you can´t call it in the asynchronous callback function of FB.getLoginStatus
Could you please explain why is this happening?
Since I want to load the JS SDK only after user clicks login button (I need this only once to get user id and token for server verification) I’m interested how it works.
that´s a basic browser feature, to block popups/ad-iframes. you can only call FB.login on user interaction, as it opens a popup.
loading the js sdk after a user clicks on a login button does not make any sense, you need the js sdk to make the login work.
2017 and still helping people.