6

希望你能帮助我解决这个问题。

我已经从 FB 开发者网站上获取了基本的登录按钮代码，并按原样写出来：

<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=345451695525893";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-  rows="1">Test text</div>

我正在做的唯一自定义是用我自己的文本（在本例中为“测试文本”）覆盖默认的“登录”文本。这在我退出 facebook 时工作正常，但有趣的是，当我登录到 facebook（通过另一个选项卡上的 facebook 站点），然后返回访问我的页面时，自定义文本闪烁，然后呈现按钮第二次使用默认的“登录”文本。

有什么想法，或者这是 Facebook 设计的功能吗？

4

4 回答 4

21

使用以下来使用您的自定义文本

<div class="fb-login-button" data-show-faces="false"  data-width="200" data-onlogin="afterLoginCallback()" login_text="Your Text" ></div>

注意，提供了属性login_text来设置登录按钮上的文本。如果你不设置它，它会用 Facebook 提供的默认文本覆盖你的文本。

于 2012-11-01T07:28:10.193 回答
8

鉴于最近对 fb-login-button 组件的更改（大约一周前似乎总是将自定义文本重写为“登录”），您最好的选择是为 Facebook 按钮和触发器创建一个自定义 CSS 类FB.通过 Javascript 登录。这就是我所做的，并且运行良好。

下面是 Facebook 按钮的一些 CSS，它看起来与标准 Facebook 按钮完全一样，并且很容易支持自定义文本：

a.fb-button {
    color: #FFF;
    display: inline-block;
    text-decoration: none;
}

.fb-button {
    background: #5F78AB;
    background-image: url('http://static.ak.fbcdn.net/rsrc.php/v2/yf/r/S-DbSHszr4D.png');  /*COPY TO YOUR OWN IMAGE STORE*/
    background-repeat: no-repeat;
    background-position: -1px -81px;
    border-top: 1px solid #29447E;
    border-right: 1px solid #29447E;
    border-bottom: 1px solid #1A356E;
    border-left: 1px solid #29447E;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    cursor: pointer;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 23px;
    line-height: 23px;
    padding: 0px 5px 0px 30px;
    text-align: left;
}

您页面上的元素将是

<a class="fb-button" onClick="fblogin();">Custom Text</a>

然后像这样的JS函数

var fblogin = function() {
    FB.login(function(response) {
        if (response) {
            if (response.authResponse) {
                //successful auth
                //do things like create account, redirect etc.
            } else {
                //unsuccessful auth
                //do things like notify user etc.
            }
        },{scope:'email,publish_stream'}); //whatever perms your app needs
};

当然，您需要在页面中包含 fb 根 div 并在此之前初始化 Facebook JS SDK

这是它的外观：

带有自定义文本的 Facebook 按钮

CSS 很酷的一点是，您可以使用它在您的网站上创建其他 Facebook 按钮，以使用熟悉的外观和感觉来处理不受支持的内容（如分享）。您甚至可以创建一些额外的 css 以允许不同大小的按钮。您只需要为背景图像设置不同的背景位置以及不同的字体大小、高度等。

于 2012-07-15T19:29:41.370 回答
3

或者你可以只使用：

<div class="fb-login-button" data-login_text="Connect with FaceBook"></div>

或者

<fb:login-button show-faces="true" width="200" max-rows="1" login_text="Connect with FaceBook"></fb:login-button>

像 1,2,3 一样简单 :)

于 2013-11-21T13:51:55.463 回答
0

试试这个，像这样添加数据登录文本。

<div class="fb-login-button"
    data-login-text="Sign in with Facebook"
    data-max-rows="1"
    onlogin="window.location.reload()"
    data-size="large"
    data-show-faces="false"
    data-auto-logout-link="false">
</div>
于 2017-01-16T09:32:05.223 回答