El botón "Iniciar sesión" es un modo sencillo de activar el proceso de inicio de sesión con Facebook en tu sitio o aplicación web.
Este botón se mostrará a las personas que todavía no iniciaron sesión en tu aplicación. Al hacer clic en él, se abre un cuadro de diálogo de inicio de sesión que activa el proceso de inicio de sesión. Las personas con sesión iniciada no verán el botón, aunque puedes elegir que vean un botón de cierre de sesión.
Si muestras un botón de cierre de sesión, las personas que lo usen cerrarán sesión tanto en tu aplicación como en Facebook.
El botón "Iniciar sesión" está diseñado para funcionar junto al SDK para JavaScript. Si estás creando una aplicación para celulares o no puedes utilizar este SDK, sigue la guía del proceso de inicio de sesión para ese tipo de aplicación.
El botón Continuar con Facebook reemplaza las versiones anteriores del botón "Iniciar sesión". Para obtener más información, consulta la sección Migración.
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. Activa Continuar como {Name} agregando data-use-continue-as="true" a la configuración del botón.
La altura del botón Continuar como {Name} no se puede personalizar.
| Tamaño del botón | Altura | Ancho | ¿Personalizar ancho? |
|---|---|---|---|
Pequeño | 20 píxeles | 200 píxeles | No |
Mediano | 28 píxeles | De 200 a 320 píxeles | Sí |
Grande | 40 píxeles | De 240 a 400 píxeles | Sí |
Si seleccionas un tamaño que supere los parámetros máximos, el botón tendrá el ancho máximo de forma predeterminada.
El botón Continuar como {Name} puede ser de gran ayuda para aumentar el número de clics y la interacción. El usuario podrá ver su nombre y foto del perfil en nuestro botón "Iniciar sesión", y tu aplicación se verá 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 {Name} es adecuado para tu aplicación.
Recuerda que, en caso de que el botón Continuar como {Name} no sea el indicado para tu aplicación, puedes probar los nuevos botones del SDK para JavaScript que dicen "Continuar con Facebook".
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.
La aplicación es social:
La intención de las personas que utilizan las aplicaciones sociales es conectarse con los demás. Observamos que el botón Continuar como {Name} funciona bien en estos casos.
Las personas en el 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.
La aplicación es nueva:
Si tu aplicación es nueva en el mercado, es posible que a los usuarios les llame la atención que su nombre y foto del perfil aparezcan automáticamente, a diferencia de una aplicación consolidada o familiar que prevean utilizar con regularidad.
La privacidad es motivo de preocupación para las personas en el 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.
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}:
Otras posibles prácticas recomendadas:
<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>Además de la configuración mencionada anteriormente, puedes cambiar los elementos siguientes:
| Configuración | Atributo HTML5 | Descripción | Opciones |
|---|---|---|---|
|
| Si está activado, el botón se reemplaza por uno de cierre de sesión si el usuario ya inició sesión. |
|
|
| Función de JavaScript que se activa al completarse el proceso de inicio de sesión. |
|
|
| Lista de permisos que se solicitan durante el inicio de sesión. |
|
|
| Elige una de las opciones de tamaño para el botón. |
|
|
| Determina qué público se elige de forma predeterminada al solicitar permisos de escritura. |
|
Los botones anteriores se migrarán a los botones nuevos. En la siguiente tabla, se muestra la asignación.
| Botón anterior | Altura anterior | Botón nuevo | Altura nueva |
|---|---|---|---|
Icono | 18 píxeles | Se dejó de utilizar | Se dejó de utilizar |
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 denominado button_type, que los botones anteriores no requieren. Mediante este parámetro se especifica ya sea 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>
}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.
Cuando alguien hace clic en el botón "Iniciar sesión" y acepta el cuadro de diálogo de inicio de sesión (al completar 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.
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 mediante 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.
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.
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.
