why is facebook js sdk web login callback not being called or called too early?

the problems

1. fb:login-button: with it, I can't log in.
2. FB.login(): with calling it by clicking a button, I'm able to log in but the callback function called too early before I log in or sign up so passes an unknown state response.

In case of fb:login-button

• with facebook logged out, facebook login pop up pops up and when I log in, nothing happens(FB.getLoginStatus returns unknown state).

• with facebook logged in, the pop up just flashes away and nothing happens(FB.getLoginStatus returns unknown state).

after both operation, checkLoginState() logs {authResponse: null, status: 'unknown'} neither status: 'not-authorized' or status: 'login'. It means I don't succeed to login I guess. Is that why the buttons onlogin callback is not called? (Cause it's called on login event)

In case of FB.login()

• with facebook unknown state, when I click the button, the callback function is called before I login. It results passing unknown state response.
• with FB.login() in console, FB.getLoginStatus returns successful login response.

Here is my html code

<body>
  <script>
    window.fbAsyncInit = function () {
      FB.init({
        appId: '...',
        cookie: true,
        xfbml: true,
        version: 'v13.0'
      });

      FB.AppEvents.logPageView();

      checkLoginState();
    };

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

    function statusChangeCallback(response) {
      console.log(response);
    }

    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function facebooklogin(){
      FB.login(function(response){
        statusChangeCallback(response);
      });
    }

    function facebooklogout(){
      FB.logout(function(response){
        statusChangeCallback(response);
      });
    }
  </script>

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

  <button onclick="facebooklogin();">fb-login</button>

Any answer would be appreciated.