Facebook es la red social por excelencia y la posibilidad de compartir contenidos a través de ella de forma automática facilita la divulgación de contenido que pueda parecernos interesante. Como habrás visto en algunos blogs, es posible compartir los posts que te resulten interesantes a través de Facebook, pero sin irnos más lejos, ¿has visto cómo compartir este post en Facebook? Pues eso es lo que vamos a desarrollar.

Un punto de partida

El primer sitio donde acudir para la integración de Facebook es la propia página para desarrolladores: Facebook for developers. Aquí encontrarás todos los SDK disponibles para las distintas plataformas, aunque en este caso, nos centraremos en la integración de Facebook en una página web por lo que usaremos el SDK de Javascript. Existe también el SDK para PHP, pero en mi caso, desarrollador con otras tecnologías diferentes a PHP, he elegido el SDK de Javascript por ser usable en un rango más amplio de lenguajes.

Toda esta documentación es muy extensa y dependiendo de la integración que queráis realizar, la configuración se puede complicar en mayor o menor medida. De hecho, vamos a ver cómo compartir contenido de una forma “fácil”, mediante los plugins sociales de Facebook, y la forma tradicional de hacerla mediante objetos de Facebook.

Cada una de estas implementaciones tiene sus pros y sus contras como verás cuando realicemos cada implementación. Esto es un punto a tener en cuenta a la realizar de una integración en tu página web, ya que, si solo pretendes realizar una integración para compartir contenidos, los plugins sociales serán suficiente para ti. Si por el contrario pretendes realizar una integración más avanzada, posibilitando a tus usuarios realizar el logado o el registro mediante Facebook, es mucho más recomendable utilizar los objetos y llamadas a Facebook, mucho más complejas, pero más configurables. A continuación, veremos una integración de las dos formas.

Compartir y Enviar mediante los plugins sociales

Vamos a realizar la implementación de los botones Compartir y Enviar que hemos visto en tantos sitios. La principal diferencia entre ellos es que mediante el botón Compartir, publicas en tu muro con la visibilidad que elijas mientras que con el botón Enviar, envías un mensaje de Facebook a una persona en concreto.

En Facebook para desarrolladores existen páginas que te generas un código para que lo copies directamente en tu página, así como otra información que te pueda interesar para configurar el comportamiento de los botones, aquí la tienes para los botones de Compartir y Enviar.

Un simple código que añadiría los dos botones es el que te pongo a continuación. No te preocupes que te explicaré algunos detalles sobre el mismo que seguro te serán interesantes.

Como puedes ver, para realizar la integración, hay que invocar siempre el javascript, que realizará una llamada asíncrona a los servidores de Facebook, buscando posteriormente la etiqueta div con el identificar “fb-root” para añadir código necesario para la comunicación con Facebook modificando el árbol DOM.

Si te paras a pensar sobre el código y verlo en detalle, te preguntarás dónde están los botones. Mediante las etiquetas “fb-send” y “fb-share-button”, Facebook generará los botones y el código necesario en ellos, haciendo referencia a la web que se le pase como parámetro en el atributo “data-href”. Existen otros parámetros configurables, aunque pocos, que tienes disponible en la documentación asociada a cada funcionalidad (Compartir y Enviar).

¡Muy importante! La url de conexión que tenemos en “js.src”. Como puedes observar en la url, realiza la inclusión de un script llamado “sdk.js”. Es de vital importancia que siempre uses sdk.js porque es la API actual de Facebook. Encontrarás por internet miles de ejemplo con “all.js”. Ésta corresponde con la versión 1 de la API y no tiene porqué estar disponible en el futuro.

Otro factor a tener en cuenta en la url es la parte “en_US”, esto indicar el idioma en que se generará el botón. En nuestros casos verás ver “Share” y “Send” escritos en los botones. Si quieres ponerlos en español de España es tan fácil como cambiar esta parte de la url a “es_ES”. Si quieres saber más sobre la internacionalización en Facebook y los idiomas disponibles, pulsa en los links.

Para terminar con la url, te explicaré los parámetros que aparecen en la misma:

• xfbml: Indica si se permite el parseo de las etiquetas con identificadores de Facebook. Debe ser 1 para los plugin sociales para que cuando encuentre las etiquetas, pueda incluir el código necesario.

• version: Aquí pondremos la versión de la API de Facebook. La última versión es la 2.7, que vio la luz en agosto de 2016. Las versiones suelen durar unos dos años por lo que pasado este tiempo es conveniente revisar la integración con Facebook por si hay cambios importantes en las versiones ¿Por qué digo esto? Pues porque Facebook utiliza la versión que le indicas en este parámetro excepto si es una versión muy antigua, que utilizará la más antigua disponible en la ventana de dos años que usa el ciclo de vida de las versiones. Y para entenderlo mejor, no hay nada como un ejemplo real: Si ahora mismo, en tu integración de Facebook le indicas la versión 2.0, Facebook usará la 2.1, ya que es la más antigua disponible que todavía está en mantenimiento.

• appId: Este parámetro no lo hemos indicado en la url, ya que no hemos realizado el alta de una aplicación en Facebook. Si has hecho el alta, aquí debes indicar el id de tu aplicación. No es necesaria para realizar la integración de los plugins sociales, pero puede ser útil para el departamento de marketing, ya que tendría centralizado las veces que se pulsa un botón y desde que página en los informes.

Hasta ahora has visto la integración de los botones de “Enviar” y “Compartir” mediante los plugins sociales, que te generan automáticamente los botones. Entonces, ¿para qué necesito otro método de implementar estos botones? Porque a Facebook le gusta cachear todo y los botones no siempre mostrarán lo que quieres compartir. Hay varias formas de lidiar con esto.

Cuando la cosa se complica

Habrá veces que, en vez del contenido a compartir, nos saldrá nuestra página principal como el enlace a compartir, aunque hayamos puesto explícitamente en el código que sea otro. Esto se debe al cacheo que hace tus páginas si están accesibles para él. El proceso de cacheo lo hace mediante un crawler que intenta obtener una copia estática de tu página, es decir, html sin javascript. ¿Por qué te subrayo lo de la copia estática? Porque es importante para encontrar una posible solución al problema, pero vamos a empezar por el principio.

Para ver los datos que obtiene el crawler de Facebook, podemos ir al debugger de Facebook. A continuación, puedes ver el contenido que tiene el crawler de Facebook para Betabeers.

Como puedes observar, el contenido para la página de principal de Betabeers si se quisiera compartir mediante Facebook sería ese.

Las etiquetas og (Open Graph) se generan automáticamente a menos que las indiques por código (las puedes ver en Compartir y Enviar). La etiqueta og:url indica la url que se va a compartir. Vamos a verlo con un ejemplo:

Tenemos una página que queremos compartir, pero resulta que el crawler de Facebook no la obtiene correctamente porque la página solo funciona cuando se le pasan parámetros o tiene una redirección pasado un tiempo (recuerda que el crawler obtiene una página estática), por lo que el crawler al no poder obtener esa página, supone que es incorrecta e indica que la url correcta es la principal del dominio o a donde redirige. Así que, cuando quieres compartir esta página mediante tus botones, la url que compartes es la principal y no la que has puesto en tu código.

Para evitar esto, tienes varias opciones, siendo una de ellas añadir tú la etiqueta indicando la url de esa página en el head del html:

De este modo, le indicarás la url que tiene compartir en el caso de que el crawler falle al obtener tu página.

El valor de esta etiqueta debe ser generado durante la creación de la página, te explico: no generes la página y luego lo cambies mediante javascript ya que el crawler no ejecuta el javascript. Debes generar el valor de esta propiedad durante la generación de la página, por lo que tendrás que obtener la url mediante variables del servidor. Esto te será útil cuando realices la integración para un portal completo.

Otra opción que tienes es cambiar la implementación de los botones para usar los objetos y método de Facebook y así evitar el crawler. Esto a veces es la única solución cuando el valor de la propiedad og:url no puede ser modificada (uso de otras aplicaciones, marketing…).

Existe una última opción que es generar un enlace, aunque es sólo es para el envío.

Compartir y Enviar mediante los objetos de Facebook

En este caso usaremos los métodos de Facebook para compartir o enviar nuestro contenido.

En este caso usaremos el objeto FB.ui para el envío del código y tendrás que ser tú quien cree el botón para enviarlo, ya que no se generará automáticamente como en el caso de los plugins sociales.

Cuando hagas click en el botón, deberá lanzar el siguiente código:

Este código sería para el envío. Si quieres ver un código completo para compartir, Facebook nos proporciona un editor ya preparado con una prueba de concepto donde podrás probar ese código y todos los que necesites: Código

También tienes códigos disponibles para los plugins sociales que podrás modificar y realizar así tus propias pruebas.

No te olvides de que estos códigos ya llevan incluido el script para cargar la API de Facebook, por lo que, si quisieras reproducirlos para tus propias páginas, ¡añade el script!

En este caso, en la url de Facebook no será necesario el parámetro xfbml, ya que no se realizará ningún parseo para añadir botones.

La principal diferencia en los códigos de compartir y enviar mediante los objetos de Facebook es el nombre de la propiedad con la url a compartir, llamándose “link” para el envío (código de arriba) y “href” para compartir.

Mediante esta implementación, el crawler de Facebook no entra en juego y te evitas posibles problemas, aunque tendrás que crear tus propios botones para compartir y enviar (botón verde de la imagen).

Conclusión

Hemos visto cómo realizar una integración de Facebook para enviar y compartir contenido mediante los plugins sociales y los métodos de Facebook, así como los problemas que pueden aparecer en determinados momentos usando los plugins.

Por norma habitual, los plugins sociales serán suficiente para realizar esta integración con Facebook sin darte muchos quebraderos de cabeza, aunque si se te da el problema que el contenido a enviar o compartir no es el que tú quieres, el crawler habrá aparecido en tu desarrollo. Tienes varias soluciones disponibles, como añadir etiquetas Open Graph o cambiar la implementación, por lo que espero que lo puedas solucionar rápidamente.

Si vas a realizar una integración que incluya el logado y el registro en Facebook, te será más útil usar la implementación mediante los métodos y objetos de Facebook, para mantener uniformidad en el código. Además, ya vas a tener que crear los botones para el logado y registro, así que un par de ellos más no será problema. Para estas integraciones sí necesitarás, obligatoriamente, un id de aplicación. Espero poder aclararte estas integraciones en próximos post, así como otros asuntos sobre la administración.

Recuerda que estos códigos son de ejemplo y no lo intentas usar tal cual en producción. No copies y pegues en todas las páginas el script para cargar el API, sácalo a un fichero común y donde tengas las propiedades parametrizadas para que te sea más fácil mantenerlo.

Por último, y para todas las integraciones que se fueran a realizar, es importante el tema del idioma en la url de conexión donde se encuentra la API de Facebook, para evitar que aparezcan diálogos en otros idiomas, así como la versión de la API a usar, intentando usar siempre la última versión.

Espero que te haya gustado y si tienes alguna pregunta, aportación o quieres que amplíe algo, puedes dejarme un comentario.