Cuadro de diálogo de contenido compartido

El cuadro de diálogo de contenido compartido ofrece a las personas la posibilidad de publicar una historia en su biografía o en la de un amigo, en un grupo o en un mensaje privado de Messenger. No se requiere permisos ampliados ni el inicio de sesión con Facebook, por lo que constituye la forma más sencilla de activar la función para compartir contenido en la Web.

Si se utiliza un navegador en el que no se ha iniciado sesión con una cookie, no aparecerá la lista desplegable para elegir el público con el que compartir contenido. Ocurre lo mismo si la aplicación usa el cuadro de diálogo para publicar en la sección de noticias en lugar del cuadro de diálogo de contenido compartido o si usa la vista web con iframes.

Para implementar el cuadro de diálogo de contenido compartido en aplicaciones para móviles 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 fragmento de código siguiente para activar el cuadro de diálogo de contenido compartido. También puedes usar un redireccionamiento a una URL. Para obtener información detallada, consulta Temas avanzados.

SDK de Facebook para JavaScript

Para compartir un enlace, activa el cuadro de diálogo de contenido compartido utilizando 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){});
¡Pruébalo!

Incluye metaetiquetas de Open Graph en la página de esta URL para personalizar la historia que se va a compartir en Facebook.

Ten en cuenta que solo aparecerá response.error_message si alguien que utilice tu aplicación la ha autenticado 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 invocas el cuadro de diálogo con uno de nuestros SDK para iOS o Android, se detectará automáticamente y se 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 modal iframe en el caso de las personas que inicien sesión en tu aplicación, async para aquellas que lo utilicen en un juego en Facebook.com y una ventana popup para 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 móviles tomarán siempre como valor predeterminado el tipo de visualización touch.

Parámetros de 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 de esta URL para personalizar la historia que se va a compartir.

La URL actual

hashtag

Hashtag especificado por el desarrollador que se añadirá al contenido compartido. Las personas podrán eliminarlo en el cuadro de diálogo. El hashtag debe incluir el símbolo “#” (por ejemplo, #facebook).

null

quote

Cita que se comparte junto con el enlace. Puede destacarla el usuario o predefinirla el desarrollador, por ejemplo, una cita destacada en un artículo.

null

mobile_iframe

Si se establece en true, el botón “Compartir” abrirá el cuadro de diálogo correspondiente en un iframe en la parte superior 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 ordenadores).

false


Datos de respuesta

Parámetro Descripción

post_id

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

error_message

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

Temas avanzados

También puedes utilizar las funciones avanzadas siguientes.

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

El cuadro de diálogo de contenido compartido para web móvil puede mostrarse ahora en un iframe, encima del contenido. Si una persona finaliza el proceso de compartir, el cuadro de diálogo se cerrará y la dirigirá al contenido original para que pueda seguir consumiéndolo.

Ejemplo de código

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

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

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

Para compartir una historia de Open Graph, activa el cuadro de diálogo de contenido compartido utilizando 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 de URL funciona del mismo modo que con los enlaces compartidos estándar.

Parámetros de share_open_graph

Utiliza los mismos parámetros que para compartir un enlace estándar, pero añade 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 elemento action_type que se va a usar. Los pares clave-valor válidos son los mismos parámetros que se pueden utilizar al publicar acciones de Open Graph a través de 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.