Botón "Iniciar sesión"

El botón "Iniciar sesión" es una alternativa sencilla de activar el proceso de inicio de sesión con Facebook en tu sitio o app web.

Si alguien todavía no inició sesión en tu app, verá este botón. Al hacer clic en él, se abrirá un cuadro de diálogo de inicio de sesión que pondrá en marcha el flujo de inicio de sesión. Las personas que ya iniciaron sesión no verán botones. También puedes optar por mostrarle un botón de cierre de sesión.

Si lo haces, cuando se utilice para cerrar sesión, los usuarios saldrán de tu app y de Facebook.

El botón de inicio de sesión solo está diseñado para funcionar vinculado al SDK de JavaScript; si estás desarrollando una app para celulares o no puedes usar nuestro SDK de JavaScript, debes seguir la guía de flujo de inicio de sesión para ese tipo de app.

El botón Continuar con Facebook reemplaza a versiones anteriores del botón "Iniciar sesión". Para obtener más información, consulta Migración.

Configurador del plugin

Botón "Continuar como {Name}"

El botón Continuar como {Name} incluye el texto "Continuar como {persons' name}" y, de manera opcional, la foto del perfil de Facebook de la persona, siempre que haya iniciado sesión en Facebook en el mismo navegador. Para usar el botón Continuar como {Name}, primero debes cargar el SDK para JavaScript. Si quieres obtener instrucciones para configurar el SDK para JavaScript, consulta el inicio rápido del SDK para JavaScript. . Para activar Continuar como {Name}, agrega data-use-continue-as="true" a la configuración del botón.

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

Si seleccionas un tamaño que supere los parámetros máximos, el botón tendrá el ancho máximo de forma predeterminada.

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

El botón Continuar como {Name} puede ser de gran ayuda para aumentar el número de clics y la interacción. Permite que el usuario vea su nombre y foto de perfil en nuestro botón "Iniciar sesión", y que tu app se vea más personalizada.

No obstante, si el usuario no espera ver su nombre y foto del perfil en este contexto, puede ser algo confuso. Ten en cuenta las siguientes recomendaciones al considerar si el botón Continuar como es adecuado para tu app.

Aun cuando el botón Continuar como {Name} no sea el indicado para tu app, puedes probar los nuevos botones del SDK para JavaScript que ponen "Continuar con Facebook".

Casos de uso recomendados

Los usuarios de nuestra base global y de las diferentes regiones a las que llegamos tienen expectativas distintas. Respeta sus expectativas al usar este botón.

Apropiado

• La aplicación es social:
  La intención de las personas que utilizan las aplicaciones sociales es conectarse con otras. Observamos que el botón Continuar como {Name} funciona bien en estos casos.

• Las personas del mercado objetivo comparten sus teléfonos:
  Cuando varias personas utilizan el mismo teléfono, el botón Continuar como {Name} les permite saber con certeza que están usando la cuenta correcta.

No apropiado

• La aplicación es nueva:
  Si tu app es nueva en el mercado, es posible que a los usuarios les llame la atención que su nombre y foto de perfil aparezcan automáticamente, a diferencia de una app consolidada o familiar que prevean utilizar con regularidad.

• La privacidad es motivo de preocupación para las personas del mercado objetivo:
  Las fotos del perfil se consideran sumamente privadas en muchos países. En consecuencia, te recomendamos que evites usar el botón Continuar como {Name} en ese caso, ya que mostrará la imagen 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 el inicio de sesión con Facebook. Es especialmente importante que sigas estas dos prácticas recomendadas al usar el botón Continuar como {Name}:

• Proporciona un modo de cerrar sesión (requisito de nuestra política).
• Prueba y mide: identifica el impacto que tiene en las percepciones y la conversión de los usuarios.

Otras posibles prácticas recomendadas:

• Expresa claramente lo que hace el inicio de sesión.
• Usa un marcador de posición o una animación giratoria mientras se carga el botón "Iniciar sesión" y retíralo cuando la carga se complete. A continuación, te ofrecemos un ejemplo de este tipo de 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 la configuración mencionada anteriormente, puedes cambiar los siguientes elementos:

Migración

Los botones anteriores se migrarán a los botones nuevos. En la siguiente tabla, se muestra la asignación.

Los nuevos botones Continuar como {Name} tienen un parámetro denominado button_type, que los botones anteriores no requieren. Mediante este parámetro se especifica el botón Continuar con Facebook o el botón Iniciar sesión con Facebook. Si no especificas ningún tipo de botón, el botón se muestra como el nuevo botón pequeño. Este tamaño es mediano en comparación con los botones anteriores. En el caso de x-large, se reducirá un poco. Si especificas el parámetro button_type, los botones se mostrarán según lo indiques.

Para hacer que los botones se carguen más rápido, inicia el SDK para JavaScript lo antes posible. Sin embargo, el sistema no puede cargar los botones hasta que no se carguen completamente la página web y JavaScript. Cuando lo hagan, el sistema podrá 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 que se cargue el SDK para JavaScript de ese idioma. Para obtener más información sobre cómo localizar el SDK para JavaScript, consulta Localización con los plugins sociales y el SDK para JavaScript.

Preguntas frecuentes

¿Cómo se utiliza esto para iniciar la sesión de usuario?

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

Esto no requiere ninguna configuración adicional, aunque puedes utilizar el valor onlogin del botón para activar una función de 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 de servidor?

Puedes, pero tendrás que seguir usando el SDK para JavaScript de modo parcial. 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 usando FB.getLoginStatus(). Puedes utilizar esta función para pasar el objeto de respuesta a tu código de servidor y así completar cualquier registro existente.

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

El botón "Iniciar sesión" no admite la repetición de solicitudes, ya que pedir un permiso rechazado no coincide con lo que se indica en el 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 aparece.

Las etiquetas <div> se transforman en botones visibles mediante una tecnología que denominamos XFBML, que utiliza JavaScript en el SDK para analizar la página y hacer reemplazos. Si estás modificando el contenido de la página dinámicamente para agregar los div después de la ejecución del método init del SDK (por ejemplo, en un cuadro de diálogo construido de forma dinámica), debes realizar otra llamada a FB.XFBML.parse() a fin de que se produzca la transformación.