Facebook登录按钮自定义文字恢复

我一把抓起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设计的功能？

来源

2012-07-09 Graeme Leggate

AFAIK - 当您使用Facebook上的社交插件时，您只能使用它们公开的功能。 JS代码的样式和 - 明显地 - 重写div元素，以便FB Like按钮在任何地方一直出现（并且考虑到本地化）。你确实有动词的选择用于按钮 - “喜欢”或“推荐” - 但这就是afaik。 – Snouto 2012-07-09 14:01:26

Graeme ...我注意到我的网站上发生了同样的事情，该网站多年来一直正确显示自定义登录文本。看起来，Facebook已经对fb-login-button元素进行了一些未经宣布（或很难找到）的更改。 – byron 2012-07-10 01:29:03

我希望Facebook在这里犯错。我今天花了几个小时的调试，直到我发现这个问题。 – 2012-07-17 00:54:08

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

下面是一些CSS的Facebook的按钮，看起来完全像标准的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 button with custom text

关于CSS很酷的事情是，你可以使用它来创建其他的Facebook按钮，您的网站的东西不被支持（如分享）与熟悉的外观和感觉。你甚至可以创建一些额外的CSS允许不同大小的按钮。你只需要有

来源

2012-07-15 19:29:41 byron

嘿，好像Facebook已经修复了这个问题，而且FBML连接按钮现在显示了像以前一样的自定义文本。继续。 – byron 2012-08-07 21:26:55

....然后两天前他们停止.....然后今天他们再次修复它....我强烈建议使用上述方法并保持FB愚蠢！ – 2012-10-17 07:28:46

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

<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-01 07:28:10 Roshni

很好的答案。应该更受评价。人们在解决方案很简单的情况下使用奇怪的定制解决方案。 – 2014-01-28 14:43:16

似乎login_text没有记录在任何地方，但它的工作原理，很好找！ – DrLightman 2015-09-18 13:18:24

更简单高效的答案！谢谢！ – 2017-10-25 00:55:45

或者你可以只使用：

<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-21 13:51:55

试试这个，添加数据登录文字是这样的。

<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-16 09:32:05 cbesabella

工作得很好。 – 2017-11-07 03:46:11

Facebook登录按钮自定义文字恢复

回答

相关问题