Facebook Login only showing button

Question

I am checking user login status. I have used the facebook code that fb has given, but it shows nothing but the login button. I want to check if user is already logged in or not.

function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        '<br/>Thanks for logging in, ' + response.name + '<br/>User Id: '+ response.id + '<br/>Email Id: '+ response.email + '!';
        //window.location.replace('abc.html');
    });
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
}

Answer 1

Your code is not the same as the facebook code I found published here . It is close but a couple keys differences and things to note. More of your file would be very helpful here. Please make sure that you have recieved and App ID from Facebook for your application and registered it. But to be clear, it seems like you are checking the login status at the wrong time. This is simply a function and we have no idea where it is called or if it mimicks the flow on the link I provided goes like this (even though this is not how they are organized within the code facebook has given). Also the only way you would see something is if you have a HTML text item with id='status' . All of this I cannot tell by your code.

1. Initialize FB SDK and do all proper setup

2. User presses login which executes this code:

   <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>

3. The above code gives you the regular scope provided by facebook (to get any more scope you have to go through a request process from facebook, just FYI). As you can see once this button is pressed and the action described as onlogin is complete we will execute the function checkLoginState() which is:

function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }

4. This gets the logon "state" and then calls the function statusChangeCallback(response) :

   function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } }

5. Now the above code, IF CONNECTED, will call your testAPI() function which will pull down the response. And it will try to find an HTML document with the id status , if you didn't create this it won't display anything.

If you are sure that you did all these steps and did them correctly, then I recommend putting a couple console.log() statements and looking at the Google Chrome console or Javascript console in your browser and seeing what state you are in and that your functions are actually being called.

If you are not sure, please double check the Facebook Login page. It is good documentation.