どのようにビルドボタンFacebookに登録？

Question

1. 「Facebookに登録」ボタンを作成しようとしています。

2. 最後だけCSSを使用したボタンを構築し、JavaScriptで組み合わせ、Javascriptがすでに動作している

3. Check here Facebook Developer再び私は、「Facebookで登録ボタン」を探してみました、私はそれができないのですました。

私はスコープのための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"}からです。私はアイコンからログインしようとした場合

/アカウントを考慮するようにリダイレクトしていない代わりに<button>にonlogin="checkLoginState();属性を移動してみてくださいonLogin=

Answer 1

おかげで、より+

クリックでもっと機能を追加します。HTMLの場合

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

：

<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> 

を設定する必要があります。私が与えることができれば、私は、このコードを修正する助けのためChozのために多く