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.
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).
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.
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:
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 |
|
|
Botón “Me gusta” |
|
|
Módulos 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.
