En este tutorial vamos a explicar los pasos que hay que seguir para añadir a una página web un botón de ‘Compartir en Facebook‘.
Para añadir un botón de forma sencilla deberemos acceder a esta página de Facebook donde obtendremos el código que necesitamos incluir en nuestra página para obtener el botón de compartir. El enlace anterior nos lleva a un formulario como el siguiente que nos guiará en la creación del botón.
En esta página hay que rellenar dos campos para indicar:
- ‘URL to share‘: URL del contenido que se quiere compartir en Facebook
- ‘Width‘: ancho en ‘px’ que va a tener el widget que se incluirá en la página
Una vez rellenados estos campos podremos ver una previsualización de como quedará creado dicho botón.
El último campo que se puede modificar es el que se llama ‘Layout‘, y que será con el que indiquemos el estilo que tendrá el botón de compatir que se está creando. Las diferentes opciones son:
- ‘box_count‘: aparecerá el botón de compartir, icono de facebook y texto de ‘compartir’, y sobre él una cajita en la que se mostrará el número de veces que se ha compartido el link.
- ‘button_count‘: actua como el caso anterior, pero la cajita con el número de veces que se ha compartido aparece a la derecha del botón
- ‘button‘: únicamente aparece el botón, sin el contador de veces compartido.
- ‘icon_link‘: muestra un botón únicamente con el icono de Facebook, y seguido a este botón, pero ya fuera de él, un enlace con el texto ‘Compartir’
- ‘icon‘: únicamente se muestra un botón con el icono de Facebook, sin ningún texto ni enlace adicional.
- ‘link‘: en este caso no es muestra ningún icono, lo que se mostraría sería un enlace con el texto ‘Compartir en Facebook’.
Una vez indicados los campos y el estilo del nuevo botón de compartir en facebook debemos hacer click en el botón ‘Get Code‘. Al hacer esto aparecerá una nueva ventana en la que se debe diferenciar varias partes:
- En la parte superior de indica cómo se va a generar el código del botón: html5, xhtml, iframe o url.
- Seleccionar el ID de la aplicación creada en Facebook y que será la utilizada por el nuevo botón. En nuestro ejemplo hemos creado previamente una aplicación en Facebook llamada ‘Golf’
- Luego aparece el código javascript que hay que añadir en la página para que se genere el botón.
1 <div id="fb-root"></div>
2 <script>(function(d, s, id) {
3 var js, fjs = d.getElementsByTagName(s)[0];
4 if (d.getElementById(id)) return;
5 js = d.createElement(s); js.id = id;
6 js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=xxxxxxxxxxxxxxxxx";
7 fjs.parentNode.insertBefore(js, fjs);
8 }(document, 'script', 'facebook-jssdk'));</script>
- Código que debemos incluir en el sitio de la página donde queramos que aparezca el botón de compartir en Facebook:
1 <div class="fb-share-button" data-href="http://developando.com/blog/" data-type="button_count"></div>En este fragmente de código se pueden ver tres atributos que se utilizan para configurar el botón de Facebook:
- Clase de botón ‘fb-share-button‘ al tratarse de un botón para compartir en Facebook.
- Campo ‘data-href‘ que indica la URL que se va a compartir.
- Campo ‘data-type indicando el estilo que va a tener el botón
Siguendo estos sencillos pasos podrás añadir crerar botones para compartir contenidos en Facebook desde tu sitio web.
Sobre David Otero
David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.
- Find more about me on:
Deja tu comentario