Es importante agregar un botón Me gusta de Facebook en tu web; tanto si tienes un blog, una wiki, una tienda virtual, o cualquier otro tipo de web, es fundamental que desde tu sitio los usuarios puedan fidelizarse a tu marca y estar al tanto de tus noticias y novedades haciéndose seguidores de tu Fan page en Facebook.

¿Cómo puedes insertar este botón? Para empezar, decirte que la ayuda de Facebook donde se muestra la información está en inglés, en donde descubriremos que lo que conocemos como botón Me gusta en inglés se denomina Like Box. Eso, claro, si lo encuentras en la ayuda

Paso a paso de cómo insertar un botón Me gusta de Facebook

Para insertar un botón disponemos de dos caminos:

1. Buscamos un botón insertado en otra página, localizamos su código, lo pegamos en el nuestro y lo adaptamos «adivinando» qué quiere decir cada cosa y descartando las aportaciones del programador de la página del que lo obtuvimos, o…
2. Seguimos este tutorial paso a paso que nos garantizará el éxito. Al menos, hasta que el cambiante Facebook cambie las cosas de sitio

Antes de nada, te aconsejamos que inicies sesión en Facebook;  a pesar de que no somos partidarios de tener la sesión iniciada (los de Facebook te rastrearán hasta el infinito y más allá), en esta ocasión resultará recomendable, y lo verás más adelante. ¡¡¡ Vamos, inicia la sesión !!!

Localizar el asistente para crear el botón Me gusta de Facebook

Pues sí, Facebook dispone de un asistente para crear el botón Me gusta. Lógico será buscarlo, así que lo primero que se nos puede ocurrir es empezar por hacer clic en cualquier Like box ya existente, por ejemplo, la que se encuentra en esta entrada en la barra lateral, justo donde dice Plug-in social de Facebook. En principio parece lógico que nos lleve directamente al lugar adecuado.

Pues no. Aquí lo único que encontrarás es ayuda, pero de cara al usuario. Ahora me parece más lógico esto

Pero tranquilo, que vamos de camino. Deberás llevar el cursor de tu ratón hasta el fondo de la página, y hacer clic sobre el enlace llamado Desarrolladores.

Estás en el portal principal de Facebook para desarrolladores. Puedes alucinar. Pero tras tomarte un momento para recuperarte del subidón, vuelve a centrarte en tu objetivo: así que haz clic en el botón Sharing que se muestra justo bajo el slider principal.

  Nueva página para de nuevo alucirnar. Pero sigue el guión, o no llegaremos nunca. De nuevo clic pero en el botón Plug-in sociales que encontrarás a mitad de página, o al fondo de la misma.   

Y ya casi, casi estamos. Un poco más de paciencia. Como vemos, lo han puesto muy fácil.Hemos llegado al último paso, donde vamos a encontrar una colección completa de útiles para agregar a nuestras páginas, aunque mi experiencia me dice que menos es más, y sobre todo, más rápido.

Que cada uno lo tome como crea más conveniente. Localiza y haz clic sobre el botón Like box (menos mal que has sido advertido, ¿verdad?)

El asistente del botón Me gusta de Facebook

De nuevo insisto; si no has iniciado sesión en Facebook, hazlo ahora en otra pestaña, y de paso nos vendrá bien, pues podemos copiar la URL de la página a la que vamos a enlazar la Like box.

Si has iniciado ahora la sesión, cuando vuelvas al asistente, refresca. El que avisa no es traidor.

• Pega la URL de tu página en 1. Cuando hagas clic en otra caja, por ejemplo en 2, verás que se actualiza la vista previa con los datos de tu página.
• Indica la altura que deseas que tome la caja en píxeles en 2. Prueba con distintos valores y haz clic en otro lado para que se actualice la vista previa.

Por ejemplo, para mostrar 3 líneas de fotos, 350 es un valor adecuado.

• Indica el ancho de la caja en píxeles en 3. 290 es un valor adecuado para la mayoría de barras laterales, pero indica el valor que se ajuste a tus necesidades. Por cierto, más abajo dice que el valor mínimo es 292 píxeles. Mis pruebas dicen que no es cierto, y que admite valores menores (por ejemplo, con 180px de ancho por 336px de alto conseguimos una caja no perfecta, pero más que aceptable, y con 235×370 una perfecta).

• Selecciona el esquema de color en 4. Si tu página tiene un color de fondo oscuro, seleccionac Dark; en caso contrario, selecciona Light.

•  En 5 puedes seleccionar:

1. Show Friend’s Faces: Permite mostrar u ocultar las miniaturas de los fans.
2. Show Post: Permite mostrar las últimas entrada de la Fan page. Si lo activas, tendrás que cambiar (aumentando) la altura de la caja en 2.

•  En 6 puedes seleccionar:

1. Show Header: Permite mostrar una línea con el texto Búscanos en Facebook como encabezado. Si la desactivas,  puedes reducir la altura en 30 píxels.
2. Show Border: Permite mostrar un borde delgado delimitando la caja. Si no lo activas, siempre podrás embeber el código dentro de un DIV, tabla, párrafo u otra entidad HTML y aplicarle borde con HTML y/o CSS.

El código a insertar en tu web

Revisa una vez más haciendo clic en otro lugar que lo que quieres es lo que muestra la vista previa. Si es así, haz clic en 7 para obtener el código.

Si no iniciaste sesión se mostrará un diálogo como este:

Tras iniciar sesión deberás empezar de nuevo.

En caso contrario (nos hiciste caso e iniciaste sesión previamente) obtendrás el siguiente diálogo tras pulsar en 7:

Lo idóneo es utilizar HTML5+Javascript, ya que hoy por hoy es el estandar a seguir; lo malo es que en este caso se pide pegar el primer bloque de código (el script de Java) en el código de la plantilla, preferiblemente justo tras la etiqueta <body>. También va a funcionar si lo pegas junto al resto del código del segundo bloque.

Para los que nos gusta trabajar menos, una buena noticia: disponemos del código en una etiqueta iframe, de la que se ha hablado mucho (despectivamente), pero que HTML5 ha readoptado (tras criticarla en versiones anteriores) y que se utiliza habitualmente a la hora de insertar otros objetos (como el caso de vídeos de YouTube, presentaciones de SlideShare, etc.)

  

 Por nuestra parte preferimos la segunda opción, así que seleccionamos el código iframe y lo copiamos (un Ctrl+C o Cmd+C en Mac bastará).

Pegar el código en nuestra web

Dadas las infinitas posibilidades, vamos a mostrar sólo el caso de que la web esté creada con WordPress. Tan sólo tienes que agregar un widget de tipo Texto (desde Apariencia > Widgets) a la barra lateral de tu preferencia (en función de tu plantilla).

En ese widget, pega el código (lo mismo da si es el código iframe o los dos bloques de código de HTML5). Dale al botón Guardar del widget de texto, y refresca la pantalla de tu blog.

 

Tu botón Me gusta de Facebook lucirá perfecta y maravillosamente, siempre que hayas indicado bien el ancho y el alto.

Pero recuerda, lo que en realidad has insertado es una Like box. Ayyyy, esos marditos roedores

Centrar y ajustar en el widget

Si las dimensiones de tu barra lateral son mayores que las del objeto insertado, puedes centrarlo utilizando una etiqueta div como muestra el código de la imagen:

Observa que hay una etiqueta <div style="..."> que abre, y otra que cierra al final </div>

Dibujar borde en el widget

Del mismo modo podemos dibujar un borde, por ejemplo, utilizando la siguiente etiqueta div:

<div style="text-align:center;border:1px solid #999;"><iframe…   …/iframe></div>