Categorías: FacebookRecursos

Añadir el botón de enviar por Facebook en tu web

El botón de enviar por Facebook permite a los usuarios de dicha red compartir mediante mensajes privados contenido de una web.

Para que el contenido se comparta mejor os recomiendo usar el marcado Open Graph. Otros post interesantes sobre Plugins de Facebook que os pueden interesar son los siguientes:

Configuración del botón de enviar por Facebook

El código y documentación del botón lo podemos encontrar en su web oficial. Ahora os explico un poco los parámetros.

El código básico es sencillo, nos encontramos con este formulario:

Si queremos obtener el código más sencillo posible solo tenemos que rellenar el campo ‘URL que enviar’ con la URL que queremos compartir.

Obtendremos un código similar a este para poner después de la apertura del tag <body>:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7&appId=270775685307";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Y este otro para poner donde queramos ubicar el botón de Facebook:

<div class="fb-send" data-href="https://developers.facebook.com/docs/plugins/"></div>

Parámetros adicionales

Tenemos una serie de parámetros adicionales para configurar más a medida nuestro botón de enviar por Facebook.

Estos son:

  • data-colorscheme: Apariencia o tema del botón, valor ‘light’ o ‘dark’.
  • data-kid-direted-site: Si tenemos contenido dirigido a menores de 13 años hay que poner el valor a ‘true’, por el contrario ‘false’ o no poner dicho parámetro.
  • data-href: Etiqueta para detectar el tráfico referido (tracking).

Os pongo un código de ejemplo para que sepáis integrar estos parámetros:

<div class="fb-send" data-colorscheme="dark" data-href="https://developers.facebook.com/docs/plugins/"></div>

Como podéis apreciar he integrado el parámetro ‘data-colorscheme’ con valor dark. De esta manera se integran facílmente los parámetros adicionales.

compartir
Publicado por
Aner Barrena