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. Al hacer 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

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 dicha plataforma en 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 SDK para JavaScript. 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.

Si seleccionas un tamaño superior a los parámetros máximos, el botón tomará de forma predeterminada la anchura máxima permitida.

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

El botónContinuar como {Name} puede ser una buena forma de aumentar los clics y la interacción. Permite al usuario ver su nombre y su foto del perfil en el botón Iniciar sesión, lo que ayuda a personalizar la experiencia que ofrece tu aplicación.

Ten en cuenta que este botón también puede generar confusión si se utiliza en contextos en los que el usuario no espere ver su nombre y su foto del perfil. Valora 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 lo más adecuado, 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 en cada región las personas 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} obtiene buenos resultados.

• Las personas del mercado objetivo compartan teléfono:
  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 o conocida que 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 incluir el botón Continuar como {Name}, ya que muestra la foto del perfil de la persona que inicia sesión.

Prácticas recomendadas para 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:

• Indica con claridad en qué consiste 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:

Migración

Se migrarán los botones anteriores a los nuevos. Puedes ver la correspondencia en la siguiente tabla:

Los nuevos botones Continuar como {Name} tienen un parámetro llamado 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 del botón 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

¿Qué hay que hacer 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 (lo que completa 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 del lado del servidor?

Sí, pero tendrás que seguir haciendo un uso parcial del 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 del 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 y 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 de nuevo al método FB.XFBML.parse() para que se realicen los reemplazos.