Login problems using facebook sdk

Question

I use the default facebook login sdk, where the documentation can be accessed here.

(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 = "//connect.facebook.net/pt_BR/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function fb_login() {
  FB.init({
    appId: '',
    cookie: true,
    xfbml: true,
    version: 'v2.8'
  });

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

  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      getUserInfo();
    }
  }

  function getUserInfo() {
    FB.api('/me?fields=name,email,gender,birthday,link', function(response) {
      var data = [];
      data.push({
        name: 'token',
        value: jQuery("#token").val()
      });
      jQuery.ajax({
        url: "/api/user/create/",
        type: "POST",
        data: data,
        success: function(returnjson) {
          alert("ok");
        },
        error: function(returnjson) {
          alert("erro");
        }
      });
    });
  }
}

The problem is that I would like to use a custom button.

<div class="customBtn btn btn-block loginBtn loginBtn--facebook">
  <fb:login-button scope="public_profile,email" onclick="fb_login()">Entrar com Facebook</fb:login-button>
</div>

With this by clicking the button the first time,

• If the user is disconnected from facebook, theoretically he should call the popup window and request login to be able to pull the information to my system.
• If the user is connected on facebook, it pulls the information to my system.

The problem is that by clicking the button, it creates the context of the facebook button inside an iframe and renders inside my button:

If the user clicks again on the button inside my button (something half Inception) popup window, or pull information....