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

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类并触发FB.Login通过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 root div,并在此之前初始化Facebook JS SDK

以下是它的外观:

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