Cuadro de diálogo de contenido compartido

El cuadro de diálogo de contenido compartido ofrece a los usuarios la posibilidad de publicar una historia en su biografía, la biografía de un amigo, un grupo o un mensaje privado de Messenger. No se necesitan el inicio de sesión con Facebook ni permisos ampliados, por lo que se trata de la forma más sencilla de activar el uso compartido en la web.

Si las personas están usando un navegador que no tiene la sesión iniciada con la cookie, no se muestra la lista desplegable para elegir el público del contenido compartido. Sucede lo mismo si la aplicación usa el cuadro de diálogo de noticias en lugar del cuadro de diálogo de contenido compartido o si la aplicación emplea una vista web con iframe.

Para implementar el cuadro de diálogo de contenido compartido en aplicaciones para celulares nativas, consulta nuestras guías para iOS y Android.

Integración

El cuadro de diálogo de contenido compartido está disponible en el SDK de Facebook para JavaScript. Puedes utilizar el siguiente fragmento de código para desencadenar el cuadro de diálogo de contenido compartido. También puedes utilizar un redireccionamiento a una URL. Para obtener información detallada, consulta la sección Temas avanzados.

SDK de Facebook para JavaScript

Si quieres compartir un enlace, para desencadenar el cuadro de diálogo de contenido compartido, utiliza la función FB.ui con el parámetro de método share.

Para compartir un enlace:

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

Incluye metaetiquetas de Open Graph en la página en esta URL, con el fin de personalizar la historia que se comparte en Facebook.

Ten en cuenta que response.error_message solo aparecerá si alguien que utiliza tu aplicación la autenticó mediante el inicio de sesión con Facebook.

Parámetros

Parámetros comunes

El SDK para JavaScript proporcionará estos parámetros automáticamente.

ParámetroDescripción

app_id

Identificador único de tu aplicación. Obligatorio.

redirect_uri

URL a la que se redirigirá cuando una persona haga clic en un botón del cuadro de diálogo. Obligatorio si se utiliza el redireccionamiento de URL.

display

Determina cómo se muestra el cuadro de diálogo.

  • Si utilizas la implementación del cuadro de diálogo de redireccionamiento de URL, se mostrará a página completa, dentro de Facebook.com. Este tipo de visualización se denomina page.
  • Si utilizas para invocar el cuadro de diálogo uno de nuestros SDK para iOS o Android, se detectará automáticamente y elegirá el tipo de visualización adecuado para el dispositivo.
  • Si utilizas el SDK de Facebook para JavaScript, se adoptará de forma predeterminada el tipo iframe modal en el caso de las personas que inicien sesión en tu aplicación o async cuando se utilice dentro de un juego en Facebook.com, y una ventana popup para todos los demás casos. Si es necesario, también puedes forzar el tipo popup cuando utilices el SDK de Facebook para JavaScript.
  • Las aplicaciones web para celulares tomarán siempre como valor predeterminado el tipo de visualización touch.

Parámetros share

ParámetroDescripciónValor predeterminado

href

Enlace adjunto a la publicación. Obligatorio si se utiliza el método share. Incluye metaetiquetas de Open Graph en la página en esta URL, con el fin de personalizar la historia que se comparte.

La URL actual

hashtag

Hashtag especificado por el desarrollador, que se agrega al contenido compartido. Se puede eliminar en el cuadro de diálogo. El hashtag debe incluir el símbolo de número, por ejemplo #facebook.

null

quote

Cita que se comparte junto con el enlace, ya sea destacada por el usuario o predefinida por el desarrollador (por ejemplo, una cita destacada en un artículo).
Este parámetro no esta disponible para las URL de Facebook.

null

mobile_iframe

Si se establece en true, el botón "Compartir" abrirá el cuadro de diálogo de contenido compartido en un iframe encima de tu sitio web. (Para obtener más información, consulta Cuadro de diálogo de contenido compartido para web móvil). Esta opción solo está disponible para dispositivos móviles (no para computadoras).

false


Datos de respuesta

Parámetro Descripción

post_id

Solo está disponible si el usuario inicia sesión en tu aplicación mediante Facebook y concedió el permiso publish_actions. Si está presente, se trata del identificador de la historia de Open Graph publicada.

error_message

Solo está disponible si el usuario accede a tu aplicación mediante el inicio de sesión con Facebook.

Temas avanzados

También puedes utilizar las siguientes funciones avanzadas.

Cuadro de diálogo de contenido compartido para web móvil

El cuadro de diálogo de contenido compartido para web móvil ofrece también la posibilidad de mostrarse en un iframe, encima de tu contenido. Cuando una persona finalice el proceso de compartir, el cuadro de diálogo se cerrará y se mostrará el contenido original, para que se pueda seguir consumiéndolo fácilmente.

Ejemplo de código

Para activar el cuadro de diálogo de contenido compartido para web móvil en un iframe, configura el atributo mobile_iframe en true:

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

Redireccionamiento de URL

Para compartir un enlace:

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

Nota: Cuando pruebes este código, elimina los saltos de línea; de lo contrario, se producirá un error.

Acciones de Open Graph

Si quieres compartir una historia de Open Graph, desencadena el cuadro de diálogo de contenido compartido mediante la función FB.ui con el parámetro de método share_open_graph.

Para compartir una historia de Open Graph mediante el cuadro de diálogo:

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

Ten en cuenta que el redireccionamiento a la URL funciona del mismo modo que para los contenidos compartidos mediante enlace estándar.

Parámetros share_open_graph

Utiliza los mismos parámetros que para compartir un enlace estándar, pero agrega lo siguiente:

Parámetro Descripción

action_type

Cadena que especifica el tipo de acción de Open Graph que se debe publicar, por ejemplo, og.likes para el tipo de Me gusta integrado. El cuadro de diálogo también admite tipos personalizados aprobados. Obligatorio si se utiliza el método share_open_graph.

action_properties

Objeto JSON de pares clave-valor que especifica los parámetros que corresponden al action_type que se está utilizando. Los pares clave-valor válidos son los mismos parámetros que se pueden utilizar al publicar acciones de Open Graph mediante la API. Obligatorio si se utiliza el método share_open_graph.

El cuadro de diálogo share_open_graph no admite mobile_iframe: true.