登入按鈕

使用「登入」按鈕在您的網站或網頁應用程式觸發 Facebook 登入流程相當容易。

若用戶尚未登入您的應用程式，就會顯示這個按鈕，按下按鈕會開啟「登入」對話方塊，開始進入登入流程。已經登入的用戶不會看見任何按鈕，但您也可以選擇向這些用戶顯示登出按鈕。

若顯示登出按鈕，使用這個按鈕登出的用戶會同時登出您的應用程式和 Facebook。

「登入」按鈕的設計只適用於搭配 JavaScript SDK，若您是要組建行動應用程式或無法使用我們的 JavaScript SDK，則應遵循該類型應用程式的登入流程指南處理。

以 Facebook 帳號繼續按鈕取代舊版的「登入」按鈕。如需更多資訊，請參閱移轉。

外掛程式配置器

以 {Name} 的身分繼續按鈕

以 {Name} 的身分繼續按鈕會註明「以 {persons' name} 的身分繼續」文字，如果該用戶使用同一個瀏覽器登入 Facebook，也可能會附上該名用戶的 Facebook 大頭貼照。要使用以 {Name} 的身分繼續按鈕，必須先載入 JavaScript SDK。關於設定 JavaScript SDK 的指示，請參閱 JavaScript SDK 快速入門。只要在按鈕設定中加入 data-use-continue-as="true" 即可啟用以 {Name} 的身分繼續。

您無法自訂以 {Name} 的身分繼續按鈕的高度。

若您選擇的大小超過最大參數，按鈕會使用預設最大寬度。

以 {Name} 的身分繼續按鈕最佳作法

以 {Name} 的身分繼續按鈕是增加點擊次數和互動的好方法。這個按鈕可以讓用戶在我們的「登入」按鈕上看見自己的大頭貼照和名稱，也有助於讓您的應用程式顯得更符合個人設計。

因此，若用戶並未預料到會在這個情況下看見自己的名稱和大頭貼照，也可能為此感到困惑。請考慮下列事項，確認在應用程式中加入以此身分繼續使用是否為最佳方式。

即便在您的應用程式中加入以 {Name} 的身分繼續並不適當，您仍然可以試試看新的「JavaScript SDK」按鈕，這些按鈕上會註明「以 Facebook 帳號繼續」。

使用案例建議

我們服務全球用戶群，不同區域的用戶有不同的期望。使用此按鈕時請尊重用戶的期望。

最佳時機

• 您的應用程式屬於社交性質：
  用戶使用社交應用程式是為了與他人交流互動。根據經驗，以 {Name} 的身分繼續在這些情況下能發揮相當好的作用。

• 目標市場的用戶會共用電話：
  多人共用相同電話時，以 {Name} 的身分繼續可以讓用戶確定自己用的是正確的帳號，不必擔心。

不恰當的時機

• 您的應用程式才剛上架：
  若您的應用程式問世不久，相較於用戶有意規律使用的成熟或熱門應用程式，用戶比較容易對為什麼會自動顯示自己的名稱和大頭貼照感到困惑。

• 目標市場的用戶會擔心隱私問題：
  許多國家／地區的用戶認為個人檔案圖像是非常私密的圖像。在此情況下，建議您避免使用以 {Name} 的身分繼續，因為這個按鈕會顯示登入用戶的個人檔案圖像。

登入按鈕最佳作法

使用 Facebook 登入時請遵循一般最佳作法。最重要的一點是，使用以 {Name} 的身分繼續時請遵循下列兩項最佳作法：

• 提供登出方法（這是政策規定）
• 測試並衡量成效 — 找出這項功能對用戶觀感和轉換效果會造成的影響

其他可行的最佳作法：

• 清楚說明登入功能
• 載入「登入」按鈕時使用預留位置／載入圖示，並於按鈕載入完畢後隨即移除。程式碼範例：

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

設定

除了以上設定，您還可變更以下項目：

移轉

將原按鈕移轉為新按鈕。下表顯示對應方式。

新的以 {Name} 的身分繼續按鈕有一個 button_type 參數，原按鈕並不要求這個參數。這就是您指定以 Facebook 帳號繼續或使用 Facebook 帳號登入按鈕的方式。如不指定按鈕類型，會轉譯成小尺寸的新按鈕。這個大小相當於中型的原按鈕。x-large 按鈕會稍微縮小一點。若指定 button_type 參數，就會按照您指定的大小顯示按鈕。

盡快啟用 JavaScript SDK 可以加快載入按鈕的速度。不過，系統必須等到 JavaScript 載入完畢之後才能建立 iframe 並載入轉譯按鈕所需的資源，這時才可以載入按鈕。

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

本地語言版本：

要載入不同語言版本的按鈕，必須載入該地區設定適用的 JavaScript SDK。關於 JavaScript SDK 本地語言版本的詳細資訊，請參閱社交外掛程式本地化和 JavaScript SDK。

常見問題

如何使用這個按鈕讓用戶登入？

一旦用戶點擊「登入」按鈕時並接受登入對話方塊（也就是完成登入流程）您的應用程式就可以使用 Facebook JavaScript SDK 代表該用戶發出 API 呼叫。

這裡沒有其他必須進行的設定，但您可以在按鈕中使用 onlogin 設定觸發自己的 JavaScript 函式，在登入時執行該函式。

使用「登入」按鈕時能不能使用伺服器端註冊程式碼？

可以，但您仍需使用部分 JavaScript SDK。點擊按鈕開始登入流程後，SDK 就能存取 authResponse 物件（此時會使用 FB.getLoginStatus()）。您可以使用這個函式將回應物件傳送到伺服器端程式碼，用於完成伺服器端的任何註冊程序。

我可以使用「登入」按鈕再次要求用戶已經拒絕的權限嗎？

「登入」按鈕不支援再次要求，因為要求已經遭拒絕的權限並不符合按鈕上的說明用語。如需再次要求某項權限，請設定一個自訂按鈕並使用 FB.login()（按照網頁版 Facebook 登入文件中的說明）。

這時不會轉譯按鈕。

系統會使用 XFBML 技術將 <div> 標記轉換成轉譯後的按鈕，這項技術必須使用 SDK 中的 JavaScript 剖析網頁並進行替換。若您要動態修改網頁內容並在 SDK init 方法執行後新增這些 div（例如動態建構對話方塊），就需要再次呼叫 FB.XFBML.parse()，使轉換生效。