如何在 facebook 中建立按钮注册？

Question

我正在尝试构建一个按钮 "register with Facebook"。
我尝试搜索 "button register with Facebook"，但我发现它又不可用了 Check here Facebook Developer
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;
            }       
        }

有什么建议吗？

更新：在我检查开发者工具后，实际上它是有效的，

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

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

Answer 1

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

Answer 2

非常感谢 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>

如何在 facebook 中建立按钮注册？

How build button Registration in facebook?

javascript

css

facebook

facebook-graph-api

facebook-javascript-sdk