Problems logging in using facebook sdk

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>

Whenyouclickthebuttonthefirsttime,

• Iftheuserisdisconnectedfromfacebook,theoreticallyheshouldcallthepopupwindowandrequestthelogininordertobeabletopulltheinformationtomysystem.
• Iftheuserisloggedintofacebook,hepullstheinformationtomysystem.

TheproblemisthatwhenIclickthebutton,itcreatesthecontextofthefacebookbuttoninsideaniframeandrendersitinsidemybutton:

So, if the user clicks on the button that is inside my button ( something mean inception ) the popup window appears, or pulls the information ... .