Agregar el SDK de extensiones de Messenger

El SDK de extensiones de Messenger incorpora valiosas funciones específicas de Messenger a cualquier sitio web o aplicación web que se abra en la vista web de Messenger. Con el SDK, puedes recuperar información sobre la persona que abrió la vista web, compartir contenido en conversaciones en Messenger y realizar una integración profunda con la UI de Messenger.

Funciones disponibles

Las siguientes funciones están disponibles en la vista web de Messenger cuando incluyes el SDK de extensiones de Messenger. Ten en cuenta que la disponibilidad real de las funciones puede variar según la versión de Messenger y el dispositivo.

Función	Descripción
getContext()	Recupera contexto de la conversación, como el PSID de la persona que abrió la vista web.
requestCloseBrowser()	Cierra la vista web y vuelve a la conversación de Messenger.
askPermission()	Solicita permiso para acciones como recuperar la información del perfil de una persona.
getGrantedPermissions()	Verifica los permisos concedidos actualmente.
getSupportedFeatures	Comprueba cuáles funciones se admiten en la vista web en el dispositivo actual, como el contenido compartido.

Para obtener más detalles sobre el uso de estas características, consulta la referencia del SDK de extensiones de Messenger.

Instalar el SDK

1. Incluir tu dominio en una lista blanca

Para usar las extensiones de Messenger en tu bot, primero debes poner en la lista blanca los dominios desde los que se sirve la página; por razones de seguridad, todos los dominios de tu página web tienen que añadirse a los dominios de la lista blanca. Consulta la documentación de referencia sobre las listas blancas para obtener más información.

Puedes agregar fácilmente un dominio a la lista blanca mediante programación con la siguiente API:

 
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v21.0/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Si la operación se completa correctamente, la API de perfiles de Messenger responderá:

{"result":"success"}

2. Incluir el SDK de extensiones de Messenger para JavaScript

Agrega el SDK de extensiones de Messenger para JavaScript a la página que se está cargando en la vista web con el siguiente código. Debes insertarlo directamente después de la etiqueta de apertura body en cada página que quieres que lo cargue:

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

3. Esperar el evento de carga del SDK

window.extAsyncInit() cuando el SDK de extensiones de Messenger para JavaScript termine de cargarse. Puedes usarlo como activador para invocar otras funciones disponibles en el SDK.

window.extAsyncInit = function() {
  // the Messenger Extensions JS SDK is done loading 
};

Usar el SDK en el cliente web de Messenger

El SDK de extensiones de Messenger es compatible para su uso en clientes de Messenger, tanto en celulares como computadoras. Sin embargo, para que funcione adecuadamente, ten en cuenta lo siguiente:

También puedes usar la propiedad window.name para comprobar la ubicación del iframe desde tu código del lado del cliente.

Cuando el iframe se activa en la web de Messenger, definimos window.name para que sea "messenger_ref". De lo contrario, cuando se cargue en las pestañas de chat de Facebook, window.name será "facebook_ref".

Funciones no compatibles

Las siguientes configuraciones o funciones no se admiten en los clientes web de Messenger. Sin embargo, funcionan adecuadamente en los clientes móviles de Messenger.

webview_height_ratio
webview_share_button
Botones "Atrás" de navegación
Título del cuadro de diálogo
Cerrar la vista web mediante el redireccionamiento de la URL

Solución de problemas

Si no puedes llamar al SDK de extensiones de Messenger desde tu página, considera realizar lo siguiente:

Cuando abras la vista web desde el menú persistente o un botón, asegúrate de que el parámetro messenger_extensions esté configurado en true. Si un usuario abrió la vista web a través de un mensaje compartido, no es necesario que haya conversado con tu bot para que las extensiones de Messenger funcionen.
Comprueba si incluiste en la lista blanca el dominio donde está alojada la página.
Comprueba que el SDK para JavaScript esté incluido en cada página que use las extensiones.
Asegúrate de llamar a ninguna de las funciones antes de que el SDK haya terminado de cargarse. Usa window.extAsyncInit (se describe aquí) para saber cuándo está lista la carga.
Asegúrate de que la página se muestre a través de HTTPS y no incluya ningún puerto no estándar.