Custom Facebook Login is behaving strangely with Javascript SDK

Question

I have created my own custom button for social logins, but when I try to login with FB here is what happens:

1. If I am not loggedin to FB already I cannot login to my site, by clicking the login to facebook button.
2. If I am already loggedin to FB, I do not get the option to click the login to FB button on my site. It simply logs me straight in.

Here is the code I am using:

JS

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.
        goAPI();
    } 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.'; 
    }
  };

  window.fbAsyncInit = function() {
  FB.init({
    appId      : '1111111111111',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.2' // use version 2.2
  });

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

  };

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



  function goAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', {fields: 'email,first_name,last_name,name'} , function(response) {

      console.log('Successful login for: ' + response.name);
     /* document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.first_name + '!'; */
      var result = response;      
      result['method'] = 'FB';
      setCookie('method', 'FB', 1);
      post('/signedin', result);    

    });
  }

HTML

<div class="social-wrap c">
    <button class="facebook" onclick="checkLoginState();">Sign in with Facebook</button>

</div>
<div id="status"></div>

CSS

div.social-wrap.c button {
    padding-left: 35px;
    padding-right: 0px;
    height: 35px;
    background: none;
    border: none;
    display: block;
    background-size: 25px 25px, cover;
    background-position: 10px center, center center;
    background-repeat: no-repeat, repeat;
    border-radius: 4px;
    color: white;
    font-family:"Merriweather Sans", sans-serif;
    font-size: 14px;
    margin-bottom: 15px;
    width: 205px;
    border-bottom: 2px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    box-shadow: 0 4px 2px -2px gray;
    text-shadow: rgba(0, 0, 0, .4) -1px -1px 0;
}

div.social-wrap.c > .facebook {
    background: url(social/facebook-icon.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c74c4), color-stop(100%, #3b5998));
    background-size: 25px 25px, cover;
    background-position: 10px center, center center;
    background-repeat: no-repeat, repeat;
}

Any idea why this is happening? I'm working from: https://developers.facebook.com/docs/facebook-login/web

Answer 1

there's "FB.login();" missing to open the facebook connect dialog.