Cómo descargar e insertar o instalar plugins o botones de Facebook en páginas web. Botón Me gusta (like)

Resumen: En este artículo veremos cómo podemos insertar elementos, botones y en general cualquier plugin que Facebook nos proporcione para poder publicarlo en nuestra página web.
Codificación aprenderaprogramar.com: DV00503A

 

 

INTRODUCCIÓN

Facebook está de moda y en muchas páginas web que visitamos podemos ver que tienen unos botones que nos permiten decir “Me gusta” en Facebook o añadir plugins donde se ven fotografías con seguidores en Facebook de una web. A continuación vamos a describir los pasos que debemos dar si queremos añadir este tipo de botones o plugins a una página web.

facebook developer websites

 

Este artículo está dirigido a personas que crean páginas web, como programadores, webmasters, o simples aficionados.

 

 

INICIO

El primer paso será ir a la dirección web que Facebook proporciona para conseguir los botones o plugins que resulten de nuestro interés. En esta dirección se concentra toda la documentación y funcionalidad que Facebook nos proporciona para poder hacer desarrollos web interactivos con esta red social. La URL es la siguiente: http://developers.facebook.com/

Una vez cargada la página debemos buscar el apartado de documentación (docs) o escribir la url https://developers.facebook.com/docs/ donde podremos ver distintos apartados para desarrolladores web como iOS developers, Android developers, Web developers, Game developers, etc.

En nuestro tenemos que buscar la opción “Sharing” (compartir) que aparecerá en algún menú lateral y dentro de las opciones de sharing debemos elegir web (apartado relacionado con la inserción de contenidos de FaceBook en una página web).  

Dentro de esta página podremos ver ya mucha información acerca de todas las funcionalidades que el propio Facebook nos facilita. A modo de ejemplo vamos a incorporar a nuestra página web el típico botón de “Me gusta” para que los usuarios puedan enlazar con sus perfiles en Facebook la información de la web.

Entre las opciones que nos aparezcan buscaremos Social Plugins para posteriormente seleccionar la opción Like Buttom (la url será del tipo https://developers.facebook.com/docs/plugins/like-button/, ten en cuenta que el aspecto y localización de estos apartados cambia con frecuencia).

facebook social plugins

 

 

Una vez estemos en esta página el primer paso será configurar el tipo de botón que queremos mostrar en nuestra web. Para ello Facebook proporciona un formulario de ayuda, donde procederemos a configurar nuestro botón deseado y así poder obtener el código necesario en los pasos siguientes.

facebook options

 

 

Así en nuestro ejemplo hemos configurado el botón a nuestro gusto, introduciendo la url deseada http://www.aprenderaprogramar.com, y después definiendo los estilos u opciones deseados para el botón, entre ellos:

- Si queremos que se muestre el botón de enviar. En nuestro caso no lo hemos seleccionado.

- La forma de visualización del botón. En nuestro caso hemos seleccionado el tipo box_count.

- El ancho (width): hemos escogido un ancho de 450 px.

- Que se muestren las caras (show friend´s faces) de seguidores de nuestro sitio.

- Verbo a mostrar o action type (like, me gusta)

- Parámetros como el color (light) y el tipo de fuente a mostrar (tahoma) puede que estén disponibles. Ten en cuenta que FaceBook va cambiando las posibilidades con frecuencia.

 

Según vamos cambiando los parámetros, vamos a ir obteniendo una previsualización del botón y cómo quedará.

Una vez configurado el botón como lo deseamos deberemos de pinchar en el botón “Get Code” que nos devolverá el código que debemos insertar en nuestra página web.

Nota: es posible que para obtener el código debamos estar logeados en facebook, y que nos impida conseguir el código si no estamos logeados.

Dependiendo del tipo de código que deseemos incluir en nuestra web nos dará distintas posibilidades, por ejemplo HTML5, XFBML o IFRAME.

En este caso hemos escogido HTML5, la primera opción (la más habitual), con lo cual ya tenemos disponible el código a insertar:

facebook plugin code

 

 

El primer bloque de código lo deberemos de introducir donde nos indiquen las instrucciones (habitualmente en nuestra página web en el archivo HTML justo después de la etiqueta <BODY>). El segundo bloque lo debemos colocar en el lugar correspondiente donde deseamos que se muestre el botón o herramienta de Facebook dentro de nuestra página web.

Así con estos sencillos pasos tenemos incluido el botón de Facebook en nuestra web y cuando un usuario de Facebook pinche en me gusta, automáticamente se le cargará en su muro o página principal una o varias noticias relacionadas con el sitio web que ha indicado que “le gusta”, en nuestro ejemplo http://www.aprenderaprogramar.com. Las personas que accedan al muro o página principal de la persona que ha pulsado el botón me gusta, verán cómo en ella aparece la información relativa al sitio.

 

 

MÁS FUNCIONALIDAD

Hemos realizado un pequeño ejemplo pero la funcionalidad de los diversos elementos de Facebook va más allá, y es posible entre otras cosas: enviar información, enviar comentarios, botones de login (para que usuarios de facebook se puedan logear dentro de tu página web), incluso botones de registro.

 DESCRIPCIÓN

 ASPECTO

Botones de enlace a una URL Facebook

facebook logo facebook icono

 Botón “Me gusta”

 facebook me gusta

 Módulos integrados

facebook modulos integrados

 

 

Existen además de estos muchas otras posibilidades en cuanto a botones e integración de plugins de Facebook en páginas web.

 

 

CONCLUSIONES

Facebook está de moda. Crece y se desarrolla a un ritmo muy rápido. ¿Será una moda que terminará algún día? No lo sabemos. Por otro lado, siempre caben reflexiones sobre la privacidad y los flujos económicos en torno a las redes sociales. No todo es tan bonito como lo pintan, por eso queremos incluir 2 referencias a artículos donde se habla un poco de estos temas, para quien tenga ganas de leer sobre el asunto:

Artículo 1: Por qué no estoy en redes sociales. ¿En qué se parecen FaceBook, un frigorífico y el peligroso DDT?

Artículo 2: Oportunidades de negocio en la web 2.0. Del telégrafo a la freeconomía.

 

 

 

 

 

 

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación