登入按鈕

登入按鈕可讓您在網站或網頁版應用程式上輕鬆觸發 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} 的身分繼續」按鈕能有效提高點擊次數與互動程度。用戶會在我們的登入按鈕上看到自己的個人資料相片與姓名，這樣有助讓您的應用程式更加個人化。

但如果用戶沒有預期在這種情境下看到自己的姓名與個人資料相片，也可能會造成混淆。請考慮下列因素來決定以 XXX 的身分繼續是否適合您的應用程式。

即使您的應用程式不適用「以 {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 JavsScript SDK 來代表該用戶執行 API 調用。

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

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

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

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

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

畫面未有顯示按鈕。

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