文档工具支持

登录按钮

“登录”按钮是在网站或网页应用中触发 Facebook 登录流程的简单方式。

如果用户尚未登录您的应用，则会看见此按钮，点击此按钮即可打开一个登录对话框，开始登录流程。已登录的用户不会看见任何按钮，但您也可以选择向这些用户展示退出按钮。

如果显示退出按钮，用户用它来退出时，会同时退出您的应用以及 Facebook。

“登录”按钮仅设计用于与 JavaScript SDK 结合运行；如果您正在构建移动应用，或无法使用 JavaScript SDK，则应该遵守针对这类应用的登录流程指南。

用继续使用 Facebook 登录按钮代替旧版“登录”按钮。详情请参阅迁移。

插件配置器

Width

按钮大小

large

按钮文本

continue_with

启用“退出”按钮

用户登录 Facebook 时显示姓名和头像 [?]

获取代码

“以 {Name} 的身份继续”按钮

以 {Name} 的身份继续按钮会显示“以 {persons' name} 的身份继续”文字；如果用户使用相同的浏览器登录 Facebook，则可选择加入其 Facebook 头像。如要使用以 {Name} 的身份继续按钮，您必须先加载 JavaScript SDK。如要获取设置 JavaScript SDK 的说明，请查看 JavaScript SDK 快速入门。将 data-use-continue-as="true" 添加到按钮的设置中，从而启用以 {Name} 的身份继续功能。

以 {Name} 的身份继续按钮的高度不可自定义。

按钮尺寸	高度	宽度	宽度可自定义吗？
小	20 像素	200 像素	否
中等	28 像素	200 - 320 像素	是
大	40 像素	240 - 400 像素	是

如果您选择的尺寸超过最大参数，按钮将默认显示最大宽度。

以 {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>

设置

除了上述设置外，您还可更改以下设置：

设置	HTML5 属性	说明	选项
`auto_logout_link`	`data-auto-logout-link`	启用后，登录按钮将在用户登录后更改为退出按钮。	`false`、`true`
`onlogin`	`data-onlogin`	登录流程完成后触发的 JavaScript 函数。	`Function`
`scope`	`data-scope`	登录期间需请求的权限列表。	`public_profile`（默认）或使用逗号分隔的权限列表
`size`	`data-size`	为按钮选择一个尺寸选项。	`small`、`medium`、`large`
`default_audience`	`data-default-audience`	用于确定请求写入权限时默认选择的分享对象。	`everyone`、`friends`、`only_me`

迁移

旧按钮将转换为新按钮。下方表格显示了新旧按钮的对应关系。

旧按钮	旧高度	新按钮	新高度
图标	18 像素	弃用	弃用
小	18 像素	小	20 像素
中等	22 像素	小	20 像素
大	25 像素	小	20 像素
超大	39 像素	小	20 像素

新的以 {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()。