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

Question

我正在使用使用以下标记创建登录按钮。

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

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

我更愿意设置适当的data-*属性，让FB自己做。

我已经试过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“图像的大小，因为它是一个多尺寸雪碧。当您重写样式时，只需使用background-position属性，直到得到正确的样式为止。

祝好运!