Question

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

我从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设计的功能？

Answer 1

使用以下内容来使用自定义文字

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

注意，提供了属性login_text来设置登录按钮上的文本。如果您没有设置它，它将使用Facebook提供的默认文本覆盖您的文本。

Answer 2

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

这里有一些用于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 root div并在此之前初始化Facebook JS SDK

以下是它的外观：

Facebook button with custom text

关于CSS的一个很酷的事情是，您可以使用它在您的网站上创建其他Facebook按钮，以获取不受支持的内容（例如分享），并具有熟悉的外观。您甚至可以创建一些额外的CSS以允许不同大小的按钮。您只需要为背景图像和不同的字体大小，高度等设置不同的背景位置。

Answer 3

或者您可以使用：

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

OR

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

简单如1,2,3：）

Answer 4

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

<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>

Facebook登录按钮自定义文本还原

4 个答案: