3

使用 XFBML，可以像这样更改登录按钮的文本：

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

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

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

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

有什么方法可以指定自定义文本并避免这个问题？例如。一些数据参数或任何 JS 方式如何动态更改文本。

4

5 回答 5

2

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

我直接在div上设置颜色。

希望您找到更好的（本机）方法来执行此操作。

于 2012-07-08T22:51:29.570 回答
0

我认为这可能归结为换行符。

Facebook JS SDK 使用

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

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

这个例子（http://www.fbrell.com/saved/bc55c3f938a9008e1e514fbb97e81535）似乎拉入了登录按钮的自定义文本。

于 2012-07-07T23:55:00.150 回答
0

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

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

.fb_iframe_widget {
    display: block !important;
}
于 2013-05-20T16:39:04.043 回答
0

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

于 2013-10-23T15:23:25.500 回答
0

交替

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

更简洁一点，避免 !important

于 2017-08-03T00:59:22.773 回答