自定义Facebook登录按钮文本（HTML5版本） - FOUC

Question

使用XFBML，可以change the text of login button这样：

<fb:login-button>
    Custom login text
</fb:login-button>

也可以使用HTML5版本的按钮：

<div class="fb-login-button">
    Custom login text
</div>

问题在于，与SDK加载后呈现的XFBML不同，HTML5版本甚至在FB SDK初始化之前由浏览器呈现，导致普通的“自定义登录文本”字符串出现在SDK初始化之前的登录按钮，并将其更改为Facebook本机外观（类似于FOUC - 无格式内容的闪存）。

有没有办法如何指定自定义文本并避免此问题？例如。一些数据参数，或任何JS方式如何动态更改文本。

Answer 1

到目前为止，我找到的唯一方法是将自定义登录文本的颜色设置为与背景相同的颜色。一旦SDK加载，Facebook就会覆盖颜色。

我直接在div上设置颜色。

希望你找到一个更好的（本机）方法来做到这一点。

Answer 2

我认为这可能是换行符。

Facebook JS SDK使用

login_text:this.dom.textContent || this.dom.innerText

所以，它应该 选择正确的东西。

此示例（http://www.fbrell.com/saved/bc55c3f938a9008e1e514fbb97e81535）似乎提取了登录按钮的自定义文本。

Answer 3

加载后，HTML上的类会发生变化。这个CSS对我有用：

.fb-login-button {
    display: none;
}

.fb_iframe_widget {
    display: block !important;
}

Answer 4

之前我必须使用Twitter小部件执行此操作。基本上，你将facebook创建的IFrame设置为不透明度为0.然后，你的自定义按钮“在它后面”。

Answer 5

可替换地

.fb-share-button:not(.fb_iframe_widget) {
    display: none;
}

更简洁，避免重要