javascript - 自定义 Facebook 登录按钮 *使用 JSSDK 而不是 FBML*

Question

我正在使用 Facebook Javascript SDK 通过以下标记创建登录按钮。

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
     data-max-rows="1">Login with Facebook</div>

这很好用。但是，我想通过扩大它来稍微定制一下。我知道在 XFBML 标记中使用不同的值(例如 size=)是可能的。通过查看生成的 html，我找到了需要应用的正确 FB css 类，因此我总是可以使用一些 JQuery 魔法来破解它。

我更愿意设置适当的 data-* 属性并让 FB-JSSDK 自行完成。

我已经尝试过 data-size= 但完全行不通

Answer 1

我刚试过 data-size="large" ，它奏效了。风采fb_button_large涂在上面，稍微大了一点。虽然它并不大，但我几乎没有注意到。此外，它没有记录在案，所以我认为它最终会贬值吗？

data-size="xlarge"然而，明显更大。

<div class="fb-login-button" data-show-faces="false"
 data-max-rows="1" data-size="xlarge">Login with Facebook</div>

所以，我不确定为什么它不适合您。那么，如果您想完全自定义按钮，我会做的只是使用 CSS。

新按钮只是嵌套了<div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> DOM 构造，您可以使用 CSS 对其进行任意样式设置。

如果您在接管 Facebook 样式时遇到级联优先级问题，只需使用 !important在你的样式声明的末尾覆盖 Facebook 的。

您甚至可以更改“F”图像的大小，因为它是 sprite with multiple sizes .当您覆盖样式时，只需使用 background-position 即可属性(property)，直到你得到合适的属性(property)。

祝你好运!