如何在Facebook上建立按钮注册？

Question

1. 我试图建立一个按钮“注册Facebook”。

2. 我试着搜索“与Facebook的按钮”，我发现它是不可再Check here Facebook Developer

3. 的Javascript已经工作，最后只能用CSS建立按钮，并用JavaScript结合起来。

我使用FB图标（出现= F）的范围，并用CSS这样结合起来

：

但弹出只有当我点击图标FB的作品，而不是按钮。

我试图让按钮像图标fb一样工作（用于弹出）。

HTML：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
<script type="text/javascript" src="catalog/view/javascript/fb.js"></script> 
     <div class="omb_login"> 
      <div class="omb_socialButtons"> 
       <button class="btn btn-lg btn-block omb_btn-facebook fb-login-button"> 
        <div class="fb-login-button" data-size="icon" data-show-faces="false" data-auto-logout-link="false" data-scope="public_profile,email" onlogin="checkLoginState();"></div> 
        Register With Facebook 
       </button> 
      </div> 
     </div> 

的Javascript：

function statusChangeCallback(response) { 
console.log('statusChangeCallback'); 
console.log(response); 
// for FB.getLoginStatus(). 
if (response.status === 'connected') { 
    // Logged into your app and Facebook. 
    window.location.replace('./home/login-callback.php'); 
} else if (response.status === 'not_authorized') { 
    // The person is logged into Facebook, but not your app. 
} else { 
    // The person is not logged into Facebook 
} 
} 

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

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

}; 

// Load the SDK asynchronously 
(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/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

CSS：

.omb_login { 
      text-align: center; 
      line-height: 300%; 
     } 

     .omb_login .omb_socialButtons a { 
      color: white; // In yourUse @body-bg 
      opacity:0.9; 
     } 
     .omb_login .omb_socialButtons a:hover { 
      color: white; 
      opacity:1;  
     } 
     .omb_login .omb_socialButtons .omb_btn-facebook {background: #3b5998;} 

     .omb_login .omb_loginOr { 
      position: relative; 
      font-size: 1.5em; 
      color: #aaa; 
      margin-top: 1em; 
      margin-bottom: 1em; 
      padding-top: 0.5em; 
      padding-bottom: 0.5em; 
     } 
     .omb_login .omb_loginOr { 
      background-color: #cdcdcd; 
      height: 1px; 
      margin-top: 0px !important; 
      margin-bottom: 0px !important; 
     } 
     .omb_login .omb_loginOr { 
      display: block; 
      position: absolute; 
      left: 50%; 
      top: -0.6em; 
      margin-left: -1.5em; 
      background-color: white; 
      width: 3em; 
      text-align: center; 
     }   

     .omb_login .input-group.i { 
      width: 2em; 
     } 
     .omb_login { 
      color: red; 
     } 

     @media (min-width: 768px) { 
      .omb_login .omb_forgotPwd { 
       text-align: right; 
       margin-top:10px; 
      }  
     } 

有什么建议？

UPDATE： 后我检查的开发人员工具，其实它的作品，

但console.log('statusChangeCallback');写Object {authResponse: undefined, status: "unknown"}。

，如果我尝试登录从图标它不是重定向到账户/账号必须设置onLogin=

Answer 1

感谢这么多Choz的帮助我解决这个问题的代码，如果我可以给更多+

添加更多功能上点击：

$(function() { 

$('.omb_login').on('click', function() { 
    FB.login(function(response) { 
     if (response.authResponse) { 
      checkLoginState(); 
     } else { 
      console.log('User cancelled login or did not fully authorize.'); 
     } 
    }); 
    }); 
}); 

对于HTML：

<div class="omb_login"> 
    <div class="omb_socialButtons"> 
     <button class="btn btn-lg btn-block omb_btn-facebook"> 
      <div class="fb-login-button" data-size="icon" data-show-faces="false" data-auto-logout-link="false" data-scope="public_profile,email" onlogin="checkLoginState();"></div> 
       Register With Facebook 
     </button> 
    </div> 
</div> 

Answer 2

<button class="btn btn-lg btn-block omb_btn-facebook fb-login-button" onlogin="checkLoginState();"> 
<div class="fb-login-button" data-size="icon" data-show-faces="false" data-auto-logout-link="false" data-scope="public_profile,email" ></div> 
    Register With Facebook 
</button> 

尝试onlogin="checkLoginState();属性转移到<button>代替。