Login con Facebook para tu sitio

El Facebook Login es una herramienta básica ya que, a veces, en la vida de un entrepreneur, es necesario acceder a los datos de un usuario en nuestra aplicación.
Esto puede ser para que se suscriba a nuestro newsletter o que encargue un producto de nuestra tienda online.
El método más común es hacer que el usuario complete un formulario con su nombre, apellido, email, fecha de nacimiento, etc… Pero imaginate ahorrar tiempo obteniendo esos datos directamente desde su cuenta de Facebook.
Hoy vamos a aprender a usar Facebook Login: una herramienta para que las visitas puedan ingresar a nuestro sitio con su cuenta de Facebook. Vamos a tomar como ejemplo una tienda online y utilizar un poco de HTML, Javascript y jQuery; por lo que es un ejercicio perfecto para principiantes. ¡Adelante!

¿Cómo integrar a tu sitio web el botón de login de Facebook?

1. Creamos la aplicación en Facebook

El primer paso es crear una aplicación en Facebook con los datos de nuestro sitio, asi de simple. Para eso ingresamos en el Facebook App Dashboard y hacemos click en «Crear nueva aplicación».

Vamos a completar el siguiente formulario, donde indicamos:

  • El nombre de la app (por ejemplo, Beta Shop)
  • La URL en Facebook (por ejemplo, facebook.com/beta_shop)
  • Y la categoría (por ejemplo, Compras)

Facebook App

No se preocupen mucho por estos datos. Si bien son requeridos, no son vitales para lo que vamos a implementar con Facebook Login. Lo más importante es el nombre que elegimos, para que nos represente bien.

A continuación, veremos la configuración general de nuestra aplicación. Como queremos utilizar Facebook Login, vamos a completar dos cosas:

  • En App Domains, escribimos el dominio de nuestra web (por ejemplo, betashop.com.ar)
  • Y en URL del sitio, ingresamos la URL completa (por ejemplo, https://betashop.com.ar)

Facebook App

El resto de la configuración pueden dejarla tal como está, no necesitamos nada más.

Bien, esto nos vá a servir para obtener una Application ID: un código que identifica nuestra aplicación en Facebook y que nos va a permitir utilizar su API.

Facebook App

Lo copiamos y pasamos al paso siguiente: programar el login en nuestro sitio.

2. Manos al código

Creamos el HTML

Vamos a crear una página HTML muy sencilla. Ponemos un mensaje para que el usuario sepa que para continuar debe loguearse con Facebook.

<p>Iniciar sesi&oacute;n con Facebook:</p>

Luego, insertamos un botón de Facebook, con esta sintaxis particular:

<fb:login-button perms="email,user_birthday"></fb:login-button>

DATO: Esto no es HTML si no XFBML, una sintaxis especial que nos permite insertar en nuestras páginas botones y elementos funcionales de la interfaz de Facebook. Podrás notar que la propiedad perms incluye email y user_birthday, para pedirle permiso al usuario a obtener estos datos adicionales. Ya veremos pronto cómo todo esto se pone en acción.

Cargamos las librerías

Como vamos a usar jQuery, vamos a incluirlo desde su CDN.

<script src="//https://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

Y vamos a utilizarlo para cargar de forma asincrónica el Facebook Javascript SDK que, como su nombre lo indica, sirve para poder utilizar las funciones de Facebook desde Javascript.

$.ajax({
  url: '//connect.facebook.net/es_ES/all.js',
  dataType: 'script',
  cache: true,
  success: function() {
    alert('Facebook listo');
  }
});

Si vimos el mensaje, entonces tanto jQuery como la librería de Facebook cargaron perfectamente.

Por ahora, entonces, el código es el siguiente:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Beta Shop</title>
</head>
<body>
<p>Iniciar sesi&oacute;n con Facebook:</p>
<fb:login-button perms="email,user_birthday"></fb:login-button>
<script src="//https://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: '//connect.facebook.net/es_ES/all.js',
    dataType: 'script',
    cache: true,
    success: function() {
      alert('Facebook listo');
    }
  });
});
</script>
</body>
</html>

YA CASI LO LOGRÁS: Si estás en proceso de desarrollar o mejorar tu sitio web con WordPress, en LatinCloud estamos listos para brindarte nuestro hosting simplificado con WordPress one click.

Y ahora, el API de Facebook

Después de tanta preparación, es hora de ponerlo en marcha. Lo hacemos con la función FB.init, seteando los siguientes parámetros:

FB.init({
  appId: '180901918757485',
  xfbml: true
});

En appId ingresamos el identificador de nuestra app, y con xfbml en true habilitamos el uso de botones y otros elementos de Facebook, como el botón del que hablamos antes.

Después de esto, vamos a suscribir nuestro script al evento auth.authResponseChange, que se dispara cada vez que la página cargue o se complete un login.

Si obtenemos una respuesta satisfactoria, mostramos el mensaje «Usuario conectado»:

FB.Event.subscribe('auth.authResponseChange', function(response) {
  if (response && response.status == 'connected') {
    alert('Usuario conectado');
  }
});

Si vemos ese mensaje, entonces significa que el usuario se autenticó y otorgó a nuestra aplicación el permiso para obtener sus datos.

Entonces, tenemos el permiso, pero… ¿cómo obtenemos los datos? Utilizando el API de Facebook con la función FB.api. Le pasamos dos parámetros:

  • La URL de la llamada a consultar, en este caso /me para obtener los datos del usuario logueado
  • Y el callback a ejecutar sobre los datos recibidos

Es decir:

FB.api('/me', function(data) {
  alert('Nombre: ' + data.name);
});

¿Qué es data? La respuesta del servidor, un JSON con todos los datos del usuario. Así como el nombre, obtuvimos el apellido, el ID y todos los datos que el usuario haya hecho públicos, como su lugar de residencia o puesto laboral. Y también su fecha de nacimiento y dirección de email, por los permisos adicionales que pedimos.

Entonces, data será algo como:

{
  "id": "100003337804280",
  "name": "Juan Sequeira",
  "birthday": "01/02/1985",
  "gender": "male",
  "link": "https://www.facebook.com/juansequeira",
  "email": "juansequeira@hotmail.com"
}

Perfecto, tenemos el código completo:

$(function() {
  $.ajax({
    url: '//connect.facebook.net/es_ES/all.js',
    dataType: 'script',
    cache: true,
    success: function() {
      FB.init({
        appId: '280437052062374',
        xfbml: true
      });
      FB.Event.subscribe('auth.authResponseChange', function(response) {
        if (response && response.status == 'connected') {
          FB.api('/me', function(response) {
            alert('Nombre: ' + data.name);
          });
        }
      });
    }
  });
});

Ahora sólo nos queda probar si funciona.

3. ¡Login!

Vamos a ver si todo marcha tal como lo esperamos. El usuario va a ver en nuestra página:

login01

Al hacer click en «Entrar», se abre una ventana pop-up como la siguiente:

login02

Ingresa en su cuenta de Facebook y decide si acepta a nuestra aplicación, Beta Shop.

login03

Luego de aceptar, se dispara el evento que habíamos programado: obtener sus datos y mostrar su nombre en pantalla.

login04

¡Hecho!

Ya lograste tu cometido, si tenés ganas de seguir aprendiendo sobre Facebook, te recomendamos leer sobre Avatares del Metaverso: Cómo crear el tuyo.


Elizabeth De Bonis

Elizabeth De Bonis es una escritora y creadora de contenido, especializada en Marketing Digital. Su pasión por el Marketing la vuelve proactiva a la hora de encontrar tópicos para cada nota que redacta. La investigación previa a la redacción de cada pieza, es una de sus partes favoritas como copywriter de LatinCloud.

1 comentario en “Login con Facebook para tu sitio”

Deja un comentario

Tu dirección de correo electrónico no será publicada.