Cómo poner los botones de Facebook para compartir

Los botones de Facebook ofrecen un montón de posibilidades para poder aumentar la interacción entre las páginas web y la red social, dar a «Me gusta«, compartir, enviar por mensaje directo… Todo esto beneficia a Facebook, porque la gente lo usa más, pero también te beneficia a ti porque atraerá más visitas a tu web. Te voy a enseñar qué opciones tienes y cómo usarlas.

Hay que reconocer que los creadores de Facebook se han esmerado en poder tener presencia en todas las webs de Internet, y para eso han creado un buen catálogo de botones y plugins. Lo bueno es que lo han simplificado tanto, que solamente tienes que ir a su página de developers, a la sección de plugins sociales, y seguir los pasos para tenerlos funcionando en tu web.

Aquí vamos a repasar qué opciones de configuración hay disponibles para cada tipo de plugin, pero primero te quiero comentar un par de cosillas que son generales a todos los casos.

Lo primero es que cuando termines de configurar tu plugin, tendrás que pulsar el botón de «Get Code» para que se abra una ventana en la que aparecerán los pasos a seguir si quieres incluir dicho plugin en tu web. Básicamente lo que te dice ahí, es que necesitas pegar un cierto código (el del primer cuadro) en tu página, justo después de abrir la etiqueta <BODY>. Pero cuidado, este código solamente lo tienes que incluir una vez. Si tu página lleva 3 plugins de Facebook, basta con poner ese código una sola vez. Después, el otro código (el del cuadro de debajo) sí es el plugin propiamente dicho y tendrás que ponerlo donde quieres que aparezca. Este otro código si será distinto para cada plugin que configures y sí tendrás que ponerlo cada uno en su sitio.

La otra cosa importante es que cuando compartes una página web, Facebook se encarga de revisar la página (scrape) y obtener información básica como el título, una descripción corta y una imagen de cabecera. Intentará sacar esa información de la mejor forma que pueda, pero lo mejor que podemos hacer es dársela nosotros mismos. Para eso puedes usar las etiquetas Open Graph, que se colocan en la cabecera (dentro de <HEAD>), y tienen esta pinta:

<meta property="og:url" content="http://ejemplo.org/paginas/cierta-pagina.html">
<meta property="og:type" content="article">
<meta property="og:title" content="Este es el título del artículo">
<meta property="og:image" content="http://ejemplo.org/img/imagen.jpg">
<meta property="og:description" content="Descripción corta del artículo">

Estas etiquetas son usadas por otras webs, buscadores y redes sociales (Google+ por ejemplo). Y muchos CMS ya las traen incluidas por defecto o mediante plugins. Si quieres más información sobre el Protocolo Open Graph, puedes visitar su web.

Cuando Facebook revisa una página web para compartirla guarda esta información en su base de datos para no tener que volver a leerla cada vez, es decir, la guarda en una caché. Así que si haces algún cambio e intentas volver a compartir el artículo, no verás los cambios porque la versión antigua está cacheada. Para resolver esto, puedes ir a esta herramienta de Facebook Developers para depurar. Con ella puedes ver qué información tiene Facebook guardada de cualquier URL y, si quieres, pedirle que vuelva a leerla para actualizarla.

Dichas estas cosas, pasamos ahora a ver todos los botones de Facebook disponibles…

Botón Like de Facebook (me gusta)

Este es el más conocido de todos. Para configurar el botón «Like» o «Me gusta«, tienes que ir a la página del Plugin: Like button configurator. Y para configurarlo necesitarás los siguientes datos:

URL to Like: es la URL de la página que sumará el «Like«. Es de esperar que sea la misma URL de la página en la que está puesto el botón, así que puedes ponerla a mano o dejarlo en blanco para que sea automático.
Width: es el número de píxeles que ocupará toda la caja del plugin. Algunas configuraciones podrían llegar a ser muy grandes por culpa del texto, con esto puedes ajustarlo.
Layout: es el tipo de diseño que queremos, hay cuatro: standard, box_count, button_count y button. Cada uno es distinto en cierto modo, así que prueba a ver cuál te gusta más o encaja mejor en tu página.

Distintos diseños del botón Like de Facebook

Action type: aquí hay que elegir entre «Like» o «Recommend«, lo que en español equivale a «Me gusta» o «Recomendar«. Esto no cambia nada excepto el texto del botón y el texto que aparecerá en el muro del usuario si lo comparte. Existe porque si se trata de un artículo triste, no queda bien decir que te gusta, pero sí puedes recomendar la lectura.
Show Friends’ Faces: este checkbox sólo funciona con el layout standard que muestra algunas fotos de perfil de los amigos del usuario que le han dado ya a «Me gusta«. Con esta opción puedes desactivarlo para que no aparezcan.
Include Share Button: sirve para que se incluya o no, el botón de «Compartir«. Este botón sirve para poner un enlace al artículo en el muro del usuario, pero sin necesidad de que le guste. En realidad cuando alguien le da a «Me gusta» ya le aparece la posibilidad de compartir en su muro si añade un comentario. Si quieres poner este botón individualmente, hay un botón específico para eso, sigue leyendo…

Botón Share de Facebook (compartir)

Con este botón permites que los visitantes de tu web, puedan compartir cómodamente el enlace a la página en la que has puesto el botón. Es igual que el que sale junto al botón «Me gusta» que hemos visto antes. Para configurar el botón «Share» o «Compartir«, tienes que ir a la página del Plugin: Share button configurator. Y tendrás que rellenar estos datos:

URL to share: esta es la URL de la página que queremos que los usuarios compartan. Seguramente sea la página en la que se encuentran en ese momento, así que la puedes poner a mano o no poner nada. Si no pones nada se coge la página actual por defecto.
Layout: con esto elegimos qué aspecto queremos que tenga. Hay 6 diseños a elegir: box_count, button_count, button, icon_link, icon y link. Pruébalos y quédate con el que más te guste.

Distintos diseños del botón de compartir de Facebook

Botón Send de Facebook (enviar)

Este botón no lo he visto mucho por ahí, pero existe y lo vamos a comentar también. No tiene muchas opciones de configuración (por no decir ninguna). Es un botón que cuando lo pulsa un usuario, le permite enviar el enlace de la página a algún/algunos contactos suyos en forma de mensaje directo. Puedes configurarlo desde la Página del plugin: Share button configurator. Para usarlo solamente hace falta un dato:

URL to send: la URL de la página que enviaremos a nuestros contactos seleccionados. Sin duda será la página en la que esté colocado el botón, así que puedes ponerlo a mano o dejarlo vacío para que la coja automáticamente.

Como he dicho, no hay ninguna configuración del aspecto disponible, así que será así siempre: (por cierto, me parece un poco raro ese color no-corporativo)

Aspecto del botón de Enviar de Facebook

Page plugin de Facebook (plugin de página)

Estrictamente, esto no es referente a tu página web, pero guarda cierta relación. Con este plugin podemos dar a conocer nuestra página de fans de Facebook y conseguir un «Me gusta» para dicha página. Nos permite mostrar un pequeño cuadro con la información básica de dicha página de fans. Puedes configurarla en su página del Plugin: Page plugin configurator, y necesitas estos datos:

Facebook Page URL: es la URL de nuestra página de fans.
Tabs: pestañas de la página que queremos que se muestren dentro del plugin. Se puede hacer que salgan las últimas publicaciones (timeline), los mensajes (messages) o eventos (events). Aunque si se deja en blanco no aparecerá nada, que también es buena opción.
Width / Height: es el tamaño (ancho y alto) que le queremos dar al plugin en píxeles.
Use Small Header: si marcas esta opción, el header de la página de fans saldrá un poco más comprimido por si tienes poco espacio en la web, o simplemente no quieres que destaque tanto.
Hide Cover Photo: por defecto el plugin cogerá tu imagen de cabecera para mostrarla de fondo, pero si marcas esta opción, saldrá con un fondo blanco genérico.
Adapt to plugin container width: activando esto, el plugin se adaptará al tamaño que tenga disponible dentro de su contenedor, lo cual puede ser recomendable para diseños Responsive.
Show Friend’s Faces: si está activo, se mostrarán debajo de la cabecera algunas fotos de perfil de gente que ha dado a «Me gusta» a la página de fans.

Este es un ejemplo de cómo queda el plugin con el timeline y el show friend’s faces (arriba) y sin timeline, ni friend’s faces, ni cover photo y con small header (abajo):

Dos ejemplos de cómo mostrar el plugin de página de Facebook

Follow Button de Facebook (seguir)

Este botón sirve para poder seguir a una página o a un perfil público. Para configurar el botón «Follow» o «Seguir«, puedes usar la página del Plugin: Follow button configurator. Y te pedirá los siguientes datos:

Profile URL: es la URL del perfil o página que quieres que tus usuarios comiencen a seguir cuando pulsen el botón.
Width / Height: es ancho y alto, en píxeles que le daremos al plugin.
Layout: hay cuatro diseños disponibles que se asemejan mucho a los del botón «Like«, son: standard, box_count, button_count y button.

Distintos diseños del botón seguir de Facebook

Show Faces: esta opción sólo es aplicable al layout standard que es el que muestra fotos de perfil de otros usuarios debajo del botón. Con este checkbox puedes activarlo o desactivarlo.

Usar el Sharer básico de Facebook

El sharer es una opción muy cómoda también para compartir contenidos en Facebook. Era la forma antigua de hacer las cosas, pero Facebook la sustituyó por sus plugins y desechó este método. Sin embargo, es tan fácil de usar y está tan extendido, que seguramente se lo pensaron dos veces antes de eliminarlo del todo. El resultado de usarlo es muy semejante a lo que tendríamos si pusiésemos el botón «Compartir«, pero se usa como un enlace a cuya dirección añadimos la URL de la página que queremos compartir. Vemos un ejemplo, supongamos que queremos compartir la página de malnuer:

https://www.facebook.com/sharer/sharer.php?u=http://malnuer.es

En naranja he puesto la URL que queremos compartir. Si alguien navega a esa dirección, le aparecerá el formulario de compartir de Facebook, por lo que lo ideal es poner esto en una etiqueta de enlace de tipo <A HREF=»…» TARGET=»_blank»>. Usa el target blank para que se abra en una ventana nueva:

<a href="https://www.facebook.com/sharer/sharer.php?u=http://malnuer.es" target="_blank">Compartir en Facebook</a>

En azul (arriba) he puesto en texto que aparecerá como enlace (anchor text), que puede ser reemplazado por una imagen si quieres. De hecho, esta parece ser la única ventaja de usar este sistema, que podemos usar nuestros propios iconos o textos. En naranja está la URL de la página que queremos compartir.

Una última posibilidad, es abrir ese enlace en una ventana de tipo pop-up, y para eso hará falta un poco de Javascript. Podría ser algo así, aunque se pueden hacer cosas más elegantes:

<a href="#" onclick="compartirFB()">Compartir en Facebook</a>

<script type="text/javascript">
function compartirFB(){
  window.open('https://www.facebook.com/sharer/sharer.php?u=http://malnuer.es', 'sharer', 'width=626,height=436');
}
</script>

Esto es un enlace, que al pulsarlo ejecuta una función Javascript que abre el popup (código en azul). Si quieres usar esto sin tener que poner la URL manualmente, y que al pulsarlo se comparta la página en la que estás en ese momento, puedes usar esta propiedad de Javascript: location.href. Cambia la línea del window.open() por esta otra:

window.open('https://www.facebook.com/sharer/sharer.php?u='+location.href, 'sharer', 'width=626,height=436');

Espero que te haya quedado claro todo, si no es así, recuerda que puedes comentar.