¿Cómo cambiar la imagen del botón de ingreso de Facebook?

Si tu sitio web admite ingreso o registro de usuarios a través de sistemas de autenticación de terceros como Facebook, Twitter, Linkedin o Google, es posible que quieras cambiar la imagen del botón de conexión.

En este artículo hablaremos específicamente del botón de conexión de Facebook. Es posible que el estándar no sea de tu agrado o no este alineado con el diseño gráfico de tu sitio. En la siguiente imagen puedes ver el botón (Facebook Login Button) generado desde esta página: https://developers.facebook.com/docs/reference/plugins/login/

¿Imaginemos que queremos armar un botón distinto, cómo el que se ve en esta imagen?

En algunos sistemas como Facebook, no es tan sencillo de cambiar la imagen mediante CSS, porque el botón termina de cargarse luego de que se apliquen los estilos. Buscando en Google encontré muchos métodos que ya no funcionan y otros que usan JavaScript en el evento windows.onload. Este último no me convenció.

Finalmente encontré una muy buena opción que probé con éxito en WordPress. El artículo que la explica es "Facebook Login Button with Image" del autor Muhammad Hasan Septiadi. El método consiste básicamente en la creación de 3 DIVs:

• Un DIV contenedor de los otros
• Un DIV con nuestra imagen
• Un DIV con el Facebook Login Button, pero transparente

La forma en que está creado el código, hace que parezca que estamos haciendo clic en nuestra imagen, cuando en realidad estamos haciendo clic en el botón de Facebook, pero este no se ve. A continuación transcribo el código propuesto por el autor en su blog:

<div style="position:relative;width:216px;height:72px;" >
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
</div>
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>
</div>
</div>

Este código puede ser que necesites modificarlo de acuerdo a tus preferencias y a la imagen que utilices. En mi caso, yo utilizo el plugin WP-FB-AutoConnect en algunos sitios de WordPress. Para aplicar este método dentro de este plugin, una posible opción es editarlo y realizar una simple modificación. Para ello seguir los siguientes pasos:

1. Ir a la sección de plugins.
2. Buscar el plugin WP-FB-AutoConnect
3. Clic en Editar
4. Editar la página wp-fb-autoconnect/Main.php
5. Buscar la siguiente línea de código

<?php

$btnTag = "document.write('<fb:login-button v=\"2\" size=\"small\" onlogin=\"$jfb_js_callbackfunc();\">Login with Facebook</fb:login-button>');";
?>

Y reemplazarla por el siguiente código:

<?php
$btnTag = "document.write('<div style=\"position:relative;left:4px;top:-30px;width:180px;height:58px;\" ><div style=\"position:absolute;left:0px;top:0px;width:180px;height:58px;z-index:111;\"><img src=\"TU_IMAGEN\" /></div><div style=\"position:absolute;left:45px;top:10px;width:180px;height:58px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);\"><fb:login-button v=\"2\" size=\"large\" onlogin=\"$jfb_js_callbackfunc();\">Login with Facebook</fb:login-button></div></div>');";
?>

Aquí termina, sólo quedan ver los resultados. Espero te sea útil y cualquier duda o método alternativio, no dejes de comentarlo. Hasta la próxima!

Posted in: BuddyPress, CSS, facebook, wordpress