Carles Brugada

 – Notícies

Idiomes / Aparença

Crear un botón "Me Gusta" de Facebook en 3 sencillos pasos

¿Quieres añadir el típico botón de “Me gusta” de Facebook en tu página web? Este sencillo tutorial de 3 pasos te ayuda a hacerlo sin necesidad de tener conocimientos de programación de páginas web.
NOTA:Hay 2 pasos adicionales para aquella gente que aun no se haya registrado a Facebook y un paso extra final, para aquellos que les guste rizar el rizo.

Paso 1: Registro en Facebook

Este paso no te llevará más de 2 minutos. Es muy intuitivo y sencillo. Sólo hace falta rellenar un pequeño formulario y confirmar la dirección de correo electrónico, mediante un enlace.
fb_01.png

Si lo que deseas es registrarte a Facebook como Empresa, Grupo o Celebridad (y no como Persona Física), te recomiendo que uses el registro rápido de “Crear una página”.
fb_02.png

Paso 2: Verificar la cuenta

Para poder crear aplicaciones, hace falta que demuestres que hay una persona física y auténtica detrás de tu cuenta de Facebook.
Para ello tienes 3 maneras de verificar tu cuenta:
  • Dar un número de teléfono móvil y verificar que es tuyo mediante la introducción de un código que recibirás de Facebook por SMS.
    Para ello debes ir a la pestaña de "Móvil" en las opciones de tu cuenta de Facebook.
  • Dar un número de tarjeta de crédito.
    Para ello debes ir a la pestaña de "Pagos" en las opciones de tu cuenta de Facebook.
    El trámite es gratuito y no te cobraran cargaran nada en la tarjeta por ello.
  • Dar una dirección de correo electrónico afiliada a una universidad en la que confie por Facebook.
    Para ello debes ir a la pestaña de "Redes" en las opciones de tu cuenta de Facebook.
A parte de permitirte crear aplicaciones, verificar tu cuenta elimina los captcha de determinadas acciones.

Paso 3: Convertirse en desarrollador de aplicaciones

Para ello sólo hace falta dar permisos a una aplicación de Facebook. Para ello dirígete al pie de la página y pincha en el enlace Desarrolladores o dirígete a la url developers.facebook.com
fb_03.png

En la aplicación para desarrolladores, dirígete al menú Mis aplicaciones.
fb_04.png

Permite a la aplicación de desarrolladores acceder a tu información básica.
fb_05.png

Paso 4: Crear una aplicación

Pulsa el botón crear una nueva aplicación y rellena los datos que te solicite.
fb_06.png

Dale un nombre a la aplicación y acepta las condiciones de uso.
fb_13.png

Los datos más interesantes para empezar se encuentran en las pestañas “Acerca de” y “Web Site”.
fb_14.png

Un ejemplo de una aplicación, una vez creada, podría ser esta.
fb_15.png

Para próximos pasos, necesitaremos el “App ID”, así que cópialo en un bloc de notas.

Paso 5: Insertar botón “Me gusta”

Simplemente pega este código en tu página web, en el lugar dónde quieras que se muestre el botón (y siempre dentro de los tag <body>).

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=AppID&amp;xfbml=1"></script>
<fb:like href="http://www.pagina.web" send="true" layout="standard" width="450" show_faces="true" action="like" colorscheme="light" font="verdana"></fb:like>

Las palabras resaltadas en el código, deben ser reemplazadas por los valores correspondientes.
Todos los valores introducidos son los valores por defecto y no hace falta sustituirlos, a excepción de la palabra "AppID", que debe ser cambiada por el AppID que has obtenido al crear tu aplicación.
Personaliza el resto de los valores para obtener un botón "Me gusta" adecuado a tus necesidades, a partir de la tabla de combinaciones que hallar´s en el siguiente paso.

Paso 6: Personalizar el botón

Los parámetros del Tag fb:like son los siguientes. Según los valores que le introduzcas, la apariencia cambiará.
Parámetro Valor Resultado
href (dirección url) URL a compartir, cuando el usuario le dé a “Me gusta”.
Si no se especifica ningún valor, se comparte la página dónde se encuentra el botón.
La URL debe contener el protocolo (http:// o https://).
send true boton_light.png
false boton_standard.png
layout standard boton_standard.png
Anchura mínima: 225 píxeles.
Anchura predeterminada: 450 píxeles.
Altura: 35 píxeles.
button_count boton_count.png
Anchura mínima: 90 píxeles.
Anchura predeterminada: 90 píxeles.
Altura: 20 píxeles.
box_count boton_top.png
Anchura mínima: 55 píxeles.
Anchura predeterminada: 55 píxeles.
Altura: 65 píxeles.
width (número) Anchura en píxeles del control
show_faces true boton_face.png
Sólo funciona con layout standard
Altura: 80 píxeles (en lugar de 35).
false boton_light.png
action like boton_standard.png
recommend boton_recommend.png
colorscheme light boton_light.png
dark boton_dark.png
font arial
lucida grande
segoe ui
tahoma
trebuchet ms
verdana
Tipo de letra de los botones. Sólo son válidos los 6 valores de la lista.
Carles Brugada
© 2011 - 2017