Facebook botón de inicio de sesión texto personalizado que revierte

Question

espero que pueda ayudarme con este problema.

que consiguió el código básico botón de acceso desde el sitio de desarrolladores de FB y lo estoy escribiendo como es:

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

La única personalización que estoy haciendo es reemplazar el valor por defecto en "Iniciar Sesión" texto con mi propio texto (en este caso, "texto de prueba"). Esto funciona bien cuando estoy desconectado de Facebook, pero curiosamente, cuando inicio sesión en Facebook (a través del sitio de Facebook en otra pestaña), y luego vuelvo a visitar mi página, el texto personalizado parpadea, luego se presiona el botón una segunda vez con el texto predeterminado "Iniciar sesión".

¿Alguna idea, o esta es una función por diseño de Facebook?

Answer 1

Teniendo en cuenta los recientes cambios en el componente fb-login-button (que hace aproximadamente una semana parece reescribir SIEMPRE el texto personalizado para "Iniciar sesión"), su mejor opción es crear una clase CSS personalizada para un Botón de Facebook y desencadenar FB.Login a través de Javascript. Eso es lo que hice y está funcionando muy bien.

Aquí hay un poco de CSS para un botón de Facebook que se ve exactamente como el botón estándar de Facebook y es compatible con el texto de encargo fácilmente:

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

El elemento en su página sería

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

Y luego un JS funcionar como

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

Por supuesto, tendrá que incluir la raíz fb div en su página y e init el Facebook JS SDK antes de este

Así es como se ve:

Lo bueno de la CSS es que se puede utilizar para crear otros botones de Facebook en su sitio para cosas que no son compatibles (como Compartir) con un aspecto familiar. Incluso puede crear algunos css adicionales para permitir botones de diferentes tamaños. Acababas necesita tener diferentes posiciones de fondo de la imagen de fondo y diferentes tamaños de fuente, altura, etc. para

Answer 2

Uso siguiente para utilizar su texto personalizado

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

Aviso, propiedad login_text se proporciona para establecer el texto en el botón de inicio de sesión. Si no lo configura, sobrescribirá su texto con el predeterminado proporcionado por Facebook.

Answer 3

o usted podría usar:

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

O

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

fácil como 1,2,3 :)

Answer 4

probar esto, complemento entrada de datos de texto como este.

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