「登入」按鈕

「登入」按鈕可讓用戶在您的網站或網頁應用程式上輕鬆觸發 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} 的身分繼續」按鈕，您仍可嘗試使用新的「以 Facebook 帳號繼續」JavaScript SDK 按鈕。

建議使用案例

我們的用戶來自全球各地，不同地區的用戶希望獲得的使用體驗也各不相同。決定是否要使用此按鈕時，請將此納入考量。

適用情況

• 您的應用程式屬於社交性質：
  使用社交應用程式的用戶都希望與他人建立聯繫。在此情況下，使用「以 {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 JavsScript SDK 來代表該用戶執行 API 呼叫。

此處無需任何額外設定，不過您可使用按鈕的 onlogin 設定，觸發登入時要執行的自訂 JavaScript 函式。

是否可使用「登入」按鈕搭配伺服器端註冊程式碼？

可以，不過仍需要使用部分的 JavaScript SDK。點擊按鈕所啟動的登入程序完成後，SDK 就可使用 FB.getLoginStatus() 來存取 authResponse 物件。您可使用此函式將回應物件傳遞給伺服器端程式碼，以完成伺服器端的任何註冊程序。

是否可使用「登入」按鈕來重新要求用戶已拒絕的權限？

因為要求已拒絕的權限不符合按鈕上的動作，所以「登入」按鈕不支援重新要求。如需重新要求權限，請設定自訂按鈕，並依網頁版「Facebook 登入」文件所述的方式來使用 FB.login()。

按鈕未顯示。

<div> 標籤是透過我們稱為 XFBML 的技術轉換為顯示的按鈕，該技術依賴 SDK 中的 JavaScript 來剖析頁面並進行替換。如果您要動態修改頁面內容，以便在執行 SDK init 方法之後加入這些 div（例如在動態建構的對話方塊中），必須再次呼叫 FB.XFBML.parse() 以便讓轉換生效。