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:
- Integrar Facebook Comments en tu web.
- Facebook Fan Box.
- Integrar el botón de ‘Me gusta’ y ‘Compartir‘ en Facebook en tu web.
- Todos los botones de Facebook para poner en tu web
- Todos los plugins sociales de Facebook
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>:
1 2 3 4 5 6 7 8 |
<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:
1 |
<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:
1 |
<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.