center align facebook登录窗口

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

您应该阅读这个link。你可以用正确的HTML标签与<div align="center">或使用CSS

Answer 2

这是旧的，但我面临着同样的问题：使用简单的自定义<button>而不是“官” 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的（），而不是的FB.login （）。 它模仿的FB.login功能：

• 打开与window.open
• 检查在使用setInterval居中的Facebook弹出如果用户登录或不
• 当用户与facebook完成后，开口期间提供的的redirectUrl弹出窗口被FB用来转到我们用window.close（）创建的空白页面 - >它关闭弹出框
• clearInterval并继续应用程序代码（登录，保存在数据库中...）

---

下面是我 JQUERY版本的脚本的一些简化和改进措施：

• 简化：只能登录按钮。没有注销。
• 改良效果：加载JSK只有当用户打FBlogin按钮（而且只有一次）
• 改良效果：防止用户触发多个Facebook的弹出式窗口（重要）

我们种重建官方FB。在这里登录功能:) 但有过官方按钮一些优势：

• 我们可以用一个简单的<button>至极是很容易的风格
• 至极的访问（试图抓住官方BTN与键盘上的TAB只）

• 至极加载速度快

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