Botón “Iniciar sesión”

Con el botón “Iniciar sesión” puedes activar fácilmente el proceso de inicio de sesión con Facebook en tu aplicación o sitio web.

Verán este botón las personas que aún no hayan iniciado sesión en la aplicación. Cuando hagan clic en él, se abrirá un cuadro de diálogo que desencadenará el proceso de inicio de sesión. Las personas que ya tengan la sesión iniciada no lo verán, aunque sí podrán ver un botón para cerrar sesión si así lo especificas.

Si decides mostrar un botón para cerrar sesión, cuando las personas hagan clic en él saldrán tanto de la aplicación como de Facebook.

El botón “Iniciar sesión” está diseñado para funcionar únicamente con el SDK para JavaScript. Si estás desarrollando una aplicación para móviles o no puedes utilizar este SDK, sigue la guía del proceso de inicio de sesión específica para el tipo de aplicación en cuestión.

El botón Continuar con Facebook reemplaza las versiones anteriores del botón “Iniciar sesión”. Si quieres obtener más información, consulta Migración.

Configurador del plugin

Tamaño del botón
Texto del botón
Forma del diseño del botón
[?]
Width

Botón “Continuar como {Name}”

El botón Continuar como {Name} muestra el texto “Continuar como {persons' name}” y, de forma opcional, la foto del perfil de Facebook del usuario, si tiene la sesión iniciada en esta plataforma desde el mismo navegador. Para poder usar el botón Continuar como {Name}, debes cargar primero el SDK para JavaScript. Si quieres obtener información sobre cómo configurar el SDK para JavaScript, consulta la guía de inicio rápido de este SDK. Para habilitar Continuar como {Name}, añade data-use-continue-as="true" a la configuración de tu botón.

La altura del botón Continuar como {Name} no se puede personalizar.

Tamaño del botónAlturaAnchura¿Anchura personalizable?

Pequeño

20 píxeles

200 píxeles

No

Mediano

28 píxeles

200-320 píxeles

Grande

40 píxeles

240-400 píxeles

Si seleccionas un tamaño superior a los parámetros máximos, el botón tomará de forma predeterminada el ancho máximo permitido.

Prácticas recomendadas para el botón Continuar como {Name}

El botón Continuar como {Name} es una forma magnífica de aumentar los clics y la interacción. Permite al usuario ver su nombre y foto del perfil en el botón “Iniciar sesión”, lo que facilita personalizar la experiencia que ofrece tu aplicación.

Debido a esto, es posible que este botón genere confusión si se utiliza en contextos en los que el usuario no espere ver su nombre y foto del perfil. Ten en cuenta los siguientes aspectos para decidir si el botón Continuar como es la mejor opción para tu aplicación.

Si el botón Continuar como {Name} no fuese adecuado para ella, puedes probar los nuevos botones del SDK para JavaScript en los que se muestra el texto “Continuar con Facebook”.

Casos de uso sugeridos

Ofrecemos nuestros servicios a usuarios de todo el mundo y las personas de cada región tienen distintas expectativas. Ten en cuenta estas expectativas cuando utilices este botón.

Utilízalo cuando...
  • Tu aplicación tenga un componente social:
    Las personas esperan conectar con otras cuando utilizan aplicaciones sociales. En estos casos, hemos observado que el botón Continuar como {Name} ofrece buenos resultados.

  • Las personas del mercado objetivo compartan teléfonos:
    Cuando varias personas utilizan un mismo teléfono, pueden asegurarse de que están usando la cuenta correcta mediante el botón Continuar como {Name}.

Evítalo cuando...
  • Tu aplicación sea nueva:
    Si tu aplicación es nueva en el mercado, mostrar de forma automática el nombre y la foto del perfil de los usuarios puede generar confusión, a diferencia de lo que ocurriría si se tratara de una aplicación ya establecida que les resultara familiar y utilizaran habitualmente.

  • Las personas del mercado objetivo se preocupen por la privacidad:
    En muchos países, las fotos del perfil se consideran privadas. En estos casos, es recomendable evitar la inclusión del botón Continuar como {Name}, ya que muestra la foto del perfil de la persona que inicia sesión.

Prácticas recomendadas sobre el botón “Iniciar sesión”

Sigue las prácticas recomendadas generales para usar el inicio de sesión con Facebook. Es especialmente importante que sigas estas dos prácticas recomendadas cuando utilices el botón Continuar como {Name}:

  • Facilita un modo de cerrar sesión (obligatorio según la política de la plataforma).
  • Haz pruebas y mide los resultados: identifica el efecto que tiene en las conversiones y la percepción de los usuarios.

Otras prácticas recomendadas posibles:

  • Indica claramente qué hace el inicio de sesión.
  • Usa un marcador de posición o un indicador durante el proceso de carga del botón “Iniciar sesión” y elimínalo cuando este termine. Un ejemplo de este código:
<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Configuración

Además de los valores anteriores, también puedes cambiar los siguientes:

Ajuste Atributo HTML5 Descripción Opciones

auto_logout_link

data-auto-logout-link

Si está habilitado, el botón cambia a uno de cierre de sesión cuando el usuario inicia sesión.

false, true

onlogin

data-onlogin

Función de JavaScript que se activa al completarse el proceso de inicio de sesión.

Function

scope

data-scope

Lista de permisos que se van a solicitar durante el inicio de sesión.

public_profile (predeterminado) o una lista de permisos separados por comas

size

data-size

Elige una de las opciones de tamaño para el botón.

small, medium, large

default_audience

data-default-audience

Determina qué público se selecciona de forma predeterminada al solicitar permisos de escritura.

everyone, friends, only_me

Migración

Se migrarán los botones anteriores a los nuevos. Puedes ver cómo se corresponden en la siguiente tabla:

Botón antiguoAltura antiguaBotón nuevoAltura nueva

Icono

18 píxeles

Obsoleto

Obsoleto

Pequeño

18 píxeles

Pequeño

20 píxeles

Mediano

22 píxeles

Pequeño

20 píxeles

Grande

25 píxeles

Pequeño

20 píxeles

Extragrande

39 píxeles

Pequeño

20 píxeles

Los nuevos botones Continuar como {Name} tienen un parámetro button_type que no es necesario en los botones antiguos. Con este parámetro indicas si quieres que el botón sea del tipo Continuar con Facebook o Iniciar sesión con Facebook. Si no lo especificas, se mostrará con el aspecto del nuevo botón pequeño. Las dimensiones de este botón se corresponden con el tamaño mediano de los botones antiguos. En el caso de x-large, las dimensiones son ligeramente inferiores. Si especificas el parámetro button_type, los botones se mostrarán tal y como has indicado.

Puedes hacer que los botones se carguen más rápido ejecutando el SDK para JavaScript lo antes posible. No obstante, el sistema no podrá cargarlos hasta que haya finalizado la carga de la página web y el código JavaScript. A continuación, creará el iframe y cargará los recursos para mostrar el botón.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Localización:

Para cargar un botón en otro idioma es necesario haber cargado el SDK para JavaScript en ese idioma. Si quieres obtener más información sobre la localización del SDK para JavaScript, consulta la sección Localización con plugins sociales y el SDK para JavaScript.

Preguntas frecuentes

¿Cómo se utiliza para iniciar la sesión de los usuarios?

Cuando alguien hace clic en el botón “Iniciar sesión” y acepta el cuadro de diálogo correspondiente (al completar el proceso de inicio de sesión), la aplicación puede utilizar el SDK de Facebook para JavaScript y realizar llamadas a la API en nombre de esta persona.

Esto no requiere ninguna configuración adicional, aunque puedes utilizar el ajuste onlogin del botón para activar una función JavaScript propia que se ejecute tras el inicio de sesión.

¿Puedo utilizar el botón “Iniciar sesión” con un código de registro en el lado del servidor?

Puedes, pero tendrás que seguir usando en parte el SDK para JavaScript. Cuando termine el proceso de inicio de sesión que se activa al hacer clic en el botón, el SDK tendrá acceso a un objeto authResponse mediante FB.getLoginStatus(). Puedes utilizar esta función para pasar el objeto de respuesta a tu código en el lado del servidor y así completar cualquier registro existente.

¿Puedo utilizar el botón "Iniciar sesión" para volver a solicitar un permiso que alguien ha rechazado?

El botón “Iniciar sesión” no admite la repetición de solicitudes, ya que la petición de un permiso rechazado no cabe en el verbo del botón. Si necesitas volver a solicitar un permiso, configura un botón personalizado y utiliza FB.login() tal como se describe en la documentación sobre el inicio de sesión con Facebook para la Web.

El botón no se muestra.

Las etiquetas <div> se transforman en botones representados gracias a una tecnología que denominamos XFBML, la cual depende de que el código JavaScript en el SDK analice la página y realice los reemplazos. Si modificas de forma dinámica el contenido de la página para añadir las etiquetas div después de ejecutar el método init del SDK (por ejemplo, con un cuadro de diálogo creado dinámicamente), tendrás que llamar nuevamente al método FB.XFBML.parse() para que se realicen los reemplazos.