自定义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>

这很好用.但是,我希望通过扩大它来自定义这一点.我知道size=在XFBML标记中使用不同的值(例如)是可行的.我已经找到了需要通过查看生成的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"图像的大小,因为它是一个有多种尺寸的精灵.当您覆盖样式时,只需使用background-position属性,直到找到正确的样式.

祝好运!