SDK para JavaScript: ejemplos

Consulta la guía de inicio rápido para aprender a cargar e inicializar el SDK de Facebook para JavaScript y la guía de configuración avanzada para personalizar la implementación. A continuación, puedes probar algunos ejemplos de uso del SDK:

• Activar un cuadro de diálogo de contenido compartido
• Inicio de sesión con Facebook
• Llamar a la API Graph

Activar un cuadro de diálogo de contenido compartido

El cuadro de diálogo de contenido compartido permite a la persona que usa una página publicar un enlace a su biografía o crear una historia de Open Graph. Los cuadros de diálogo que se muestran al usar el SDK para JavaScript adoptan automáticamente el formato del contexto en el que se cargan (web para celulares o computadoras).

A continuación, te mostramos cómo puedes usar el método FB.ui() del SDK para invocar un cuadro de diálogo de contenido compartido muy básico. Agrega estas líneas después de la llamada a FB.init() en el código de configuración básica:

FB.ui(
 {
  method: 'share',
  href: 'https://developers.facebook.com/docs/'
}, function(response){});

Cuando vuelvas a cargar la página, verás aparecer un cuadro de diálogo de contenido compartido en la parte superior. Agreguemos algunos parámetros adicionales a la llamada a FB.ui para que el cuadro de diálogo de contenido compartido realice una acción más compleja: invocar la publicación de una acción de Open Graph.

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.likes',
  action_properties: JSON.stringify({
    object:'https://developers.facebook.com/docs/',
  })
}, function(response){
  // Debug response (optional)
  console.log(response);
});

Ahora, al volver a cargar la página, verás de nuevo un cuadro de diálogo de contenido compartido, pero esta vez incluirá una vista previa de la historia de Open Graph. Cuando se cierre el cuadro de diálogo, ya sea mediante la publicación de la historia o haciendo clic en "Cancelar", se activará la función de respuesta.

Consulta la documentación de referencia de FB.ui para obtener una lista completa de los parámetros que puedes usar y la estructura del objeto de respuesta.

Inicio de sesión con Facebook

El inicio de sesión con Facebook permite que los usuarios se registren o inicien sesión en la aplicación con su identidad de Facebook.

Tienes a tu disposición una guía completa acerca de cómo implementar el inicio de sesión con Facebook mediante el SDK para JavaScript. Sin embargo, por ahora solo te mostraremos ejemplos de código básico para que veas cómo funciona. Inserta las líneas siguientes después de la llamada original a FB.init:

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    console.log('Logged in.');
  }
  else {
    FB.login();
  }
});

Consulta la guía sobre el inicio de sesión para saber exactamente qué sucede en este caso. Cuando vuelvas a cargar la página, debe aparecer el cuadro de diálogo de inicio de sesión en la aplicación (si todavía no le concediste permiso).

Llamar a la API Graph

Para leer o escribir datos en la API Graph, utiliza el método FB.api(). El parámetro version en la llamada a FB.init se usa para determinar qué versión de la API Graph se utiliza.

Botón "Iniciar sesión" y solicitud de permisos

En primer lugar, obtén el permiso publish_actions para hacer llamadas de publicación a la API. Agrega un botón o un enlace para llamar a FB.login. Se activará un cuadro de diálogo de inicio de sesión que solicitará los permisos correspondientes.

<script>
// Only works after `FB.init` is called
function myFacebookLogin() {
  FB.login(function(){}, {scope: 'publish_actions'});
}
</script>
<button onclick="myFacebookLogin()">Login with Facebook</button>

Llamada a la API Graph

Ahora te mostraremos cómo realizar una llamada a la API para publicar un mensaje. Agrega el código en la función de respuesta de la llamada a FB.login que agregaste antes:

FB.login(function(){
  // Note: The call will only work if you accept the permission request
  FB.api('/me/feed', 'post', {message: 'Hello, world!'});
}, {scope: 'publish_actions'});

Prueba el script. Se publicará un mensaje de estado en tu biografía: