Personalización del botón de inicio de sesión en Facebook * USANDO JSSDK no FBML *

Question

Estoy usando el JavaScript SDK de Facebook para crear un botón de inicio de sesión utilizando el siguiente marcado.

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
    data-max-rows="1">Login with Facebook</div> 

Esto funciona bien. Sin embargo, quiero personalizar esto un poco haciéndolo más grande. Sé que esto fue posible usando diferentes valores (size= por ejemplo) en el marcado XFBML. He encontrado las clases correctas de FB css que deben aplicarse al mirar el html generado, así que siempre puedo hackearlo con algo de magia de JQuery.

Prefiero simplemente configurar el atributo data-* adecuado y hacer que FB-JSSDK lo haga solo.

Ya he probado data-size= la que totalmente no funciona

Answer 1

simplemente traté data-size="large", y funcionó. Se aplicó el estilo fb_button_large, y fue un poco más grande. Aunque no era mucho más grande, apenas lo noté. Además, no está documentado, ¿asumo que se depreciará eventualmente?

data-size="xlarge" era AVISOMENTE más grande, sin embargo.

<div class="fb-login-button" data-show-faces="false" 
data-max-rows="1" data-size="xlarge">Login with Facebook</div> 

Por lo tanto, no estoy seguro de por qué no funciona para usted. Lo que haría en su lugar, entonces, es simplemente usar CSS si desea personalizar completamente el botón.

El nuevo botón está anidado <div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> construcción DOM, y puede usar CSS para darle el estilo que desee.

Si tiene un problema de precedencia en cascada con los estilos de Facebook haciéndose cargo, simplemente use !important al final de su declaración de estilo para anular los de Facebook.

Incluso puede cambiar el tamaño de la imagen "F", ya que es un sprite with multiple sizes. Cuando anula los estilos, simplemente juegue con la propiedad background-position hasta que obtenga la correcta.

¡Buena suerte!