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