登入按鈕

登入按鈕可讓您在自家網站或網頁版應用程式上輕鬆觸發 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 就可以使用 FB.getLoginStatus() 來存取 authResponse 物件。您可使用此函數將回應物件傳遞給伺服器端程式碼，以完成伺服器端的任何註冊程序。

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

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

畫面未有顯示按鈕。

我們使用 XFBML 技術將 <div> 標籤轉換為顯示按鈕，這需要 SDK 中的 JavaScript 來剖析頁面及提供替代項目。如果您在執行 SDK init 方法後，動態修改頁面內容來加入這些 div（例如在以動態建構的對話框中），則您需要再次呼叫 FB.XFBML.parse()，才能實現轉換。