“登录”按钮

“登录”按钮是一种可在网站或网页应用上触发 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 进行本地化。

常见问题

如何使用此按钮让用户登录？

用户点击“登录”按钮、接受登录对话框并完成登录流程后，您的应用即可使用 JavaScript 版 Facebook SDK，以该用户的身份调用 API。

此处无需进行额外设置，但您可以针对此按钮使用 onlogin 设置，以便触发登录即会运行的 JavaScript 自定义函数。

是否可以将“登录”按钮与服务器端注册代码结合使用？

可以，但您仍然需使用 JavaScript SDK 的部分功能。完成通过点击按钮启动的登录流程后，SDK 即可使用 FB.getLoginStatus() 访问 authResponse 对象。您可以使用此函数将响应对象传递至服务器端代码，以完成其中包含的各项注册。

是否可以使用“登录”按钮重新请求用户拒绝提供的权限？

由于请求已拒绝的权限与按钮上的动词不符，因此“登录”按钮不支持重新请求。如果需要重新请求权限，请设置自定义按钮，并按照网页版 Facebook 登录文档的说明使用 FB.login()。

按钮未显示。

我们会使用一项名为 XFBML 的技术将 <div> 标签转换为已显示的按钮，该技术依靠 SDK 中的 JavaScript 来解析网页和作出替换。如果您在运行 SDK init 方法后动态修改网页内容，以添加这些 div（例如在动态构建的对话框中），则为使转换生效，您需要再次调用 FB.XFBML.parse()。