Question

我正在尝试使用Javascript SDK在我的应用程序中实现Facebook登录。我使用以下js：

$("#loginWithFacebook").click(function () {
    FB.login(function (response) {
        if (response.status === 'connected') {
            FB.api('/me', function (user_details) {
               // do something with the user_details
            });
        }
    });

问题是当我拨打FB.login时，它会将Facebook登录窗口打开到最右边，但我希望它是居中对齐的。有什么方法可以解决这个问题吗？

Answer 1

这是旧的，但我遇到了同样的问题：使用简单的自定义<button>代替＆＃34;官方＆＃34; FB按钮，登录弹出窗口将在屏幕的最右侧打开。

我认为官方按钮（很复杂：带有JS的完整html页面）使用SDK来集中弹出窗口。我无法使用SDK通过自定义按钮集中弹出窗口（如果有人，请告诉我们！）。从自定义按钮触发时，FB.login（）函数不会居中弹出。

我找到了这个解决方案，效果很好： http://permadi.com/2011/04/centering-facebook-oath-login-popup-dialog/

在线演示（查看源代码查看代码）： http://www.permadi.com/tutorial/facebook-js-oauth-popup-centered/index.html

它使用FB.getLoginStatus（）和NOT FB.login（）。它模仿FB.login函数：

使用window.open打开居中的facebook弹出窗口
使用setInterval检查是否记录了用户
当用户完成facebook时，FB打开弹出窗口时提供的redirectUrl进入我们创建的空白页面，其中仅包含window.close（） - ＆gt;它会关闭弹出窗口
clearInterval并继续使用应用代码（登录，保存在数据库中......）

以下是我的他们脚本的JQUERY版本，并进行了一些简化和改进：

简化：只有登录按钮。没有退出。
改进：仅当用户点击FBlogin按钮（仅一次）
改进：阻止用户触发多个facebook弹出窗口（重要）

我们在这里重新创建官方FB.login函数:) 但是比官方按钮有一些优势：

我们可以使用简单的<button>非常容易打造
可以访问（尝试仅在键盘上用TAB捕获官方btn）

快速加载

var fbOpen = 0; // to prevent opening multiple facebook login popup dialog
// otherwhise setInterval is messing things around!

function treatFBresponse() {
        FB.init({
                appId : 'YOUR_APDD_ID',
                status :true, // IMPORTANT, otherwhise if user cancel login (->response.status="unknown), 2nd time -> response.status="NULL" -> no possible login any more!
                cookie : true,
                version : 'v2.5'
        });

        FB.getLoginStatus(function(response) {
                if (response.status=="connected" && response.authResponse){
                        FB.api('/me?fields=id,name,first_name,last_name,picture,email', function(response) {
                        // USER LOGGED into your app and facebook -> console.dir(response); -> log into your app, save in database etc.

                }else{
                        // USER NOT LOGGED into your app
                        fbOpen = 0; // we let him retry
                }
        });
}

var gotFBscript = 0; // to load FB JS SDK only once

function fbSDK() {
        // SDK NOT LOADED YET
        if( !gotFBscript){
                console.log('getting FB JS SDK...');

                $.ajax({        
                // OR   $.ajaxSetup({ cache: true });
                //      $.getScript('//connect.facebook.net/en_EN/sdk.js', function(){ gotFBscript = 1 ...
                // BUT  $.ajax is better I think because it lets you set cache to true locally
                  url: '//connect.facebook.net/en_EN/sdk.js',
                  dataType: "script",
                  cache:true,
                  success: function() {

                        gotFBscript = 1;
                        treatFBresponse();

                  }
                });

        // SDK ALREADY LOADED
        }else if ( gotFBscript ){
                treatFBresponse();
        }
};

function facebookPopup() {
        var popupWidth=500,
            popupHeight=300,
            xPosition=($(window).width()-popupWidth)/2,
            yPosition=($(window).height()-popupHeight)/2,
            loginUrl="http://www.facebook.com/dialog/oauth/?"+
                "scope=public_profile,email&"+  // instead of publish_stream
                "api_key=YOUR_APDD_ID&"+        // instead of client_id
                "redirect_uri=http://www.MY_SITE.COM/path/to/self-closing-empty-page.php&"+
                "response_type=token&"+
                "display=popup",

            fbLoginWindow=window.open(loginUrl, "LoginWindow", 
                "location=1,scrollbars=1,"+
                "width="+popupWidth+",height="+popupHeight+","+
                "left="+xPosition+",top="+yPosition),

            loginTimer=setInterval( function() { checkLoginWindowClosure(fbLoginWindow, loginTimer), 1000);
};

function checkLoginWindowClosure(fbLoginWindow, loginTimer) { 
        if (fbLoginWindow.closed) 
        {
                clearInterval(loginTimer);
                fbSDK();
        }
};

$("#YOUR_CUSTOM_FB_BUTTON").on('click', function() {
        if(fbOpen === 0) {
                fbOpen = 1;
                facebookPopup();
        }
});

Answer 2

您应该阅读此link。您可以使用<div align="center">的正确HTML标记或使用CSS

中心对齐facebook登录窗口

2 个答案: