Как создать кнопку Регистрация в facebook?

Question

1. Я пытаюсь создать кнопку «Зарегистрируйтесь на Facebook».

2. Я попытался найти «кнопку регистрации в Facebook», и я нашел, что это не доступно снова Check here Facebook Developer

3. Javascript уже работает, последняя только кнопку построить с помощью CSS и в сочетании с JavaScript.

Я с помощью значка Fb (появился = F) для сферы и объединить его с помощью CSS, как это:

но всплывал работает только тогда, когда я нажимаю значок Ф.Б., а не кнопку ,

Я попытался заставить кнопку работать как значок 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> вместо этого.