jquery - Uso de la interfaz de usuario de Facebook "share_open_graph" para crear un diálogo de compartir dinámico para los resultados de la prueba

facebook-graph-api facebook-javascript-sdk

Question

Resumen: mi problema es obtener FB.ui , a través del método share_open_graph , para crear un cuadro de diálogo compartido personalizado que contenga títulos, descripciones e imágenes diferentes, según las acciones del usuario en la página.

La pregunta fue la primera y no tuve ninguna reputación, por lo que se eliminaron numerosos enlaces, pero (gracias a todos los que me dieron votaciones) pude rescatar las capturas de pantalla que originalmente faltaban.

EDITAR: Terminé teniendo que usar una ventana emergente normal con un cuadro de diálogo compartido, no es ideal, pero al menos funciona de manera confiable. Cuanto más buscaba en la web, más descubría que muchos sitios respetables de alto perfil todavía usaban popup para compartir de esta manera, así que pensé que en este caso las ventajas de usar una solución heredada superaban el trabajo extenso en encontrar una solución adecuada, utilicé https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 con detalles dinámicos suministrados a través de la consulta de URL, que al menos es un poco más actualizado que el uso de sharer.php que era originalmente mirando en Buzzfeed.

Mi página:

Tengo un cuestionario Diez preguntas, cinco respuestas para cada una, se produce un resultado asignando una de las cinco opciones como el "resultado". Todo en cuanto a la prueba funciona bien. El resultado se obtiene cuando se completa el cuestionario a través de Ajax / jQuery, esto es para que en el futuro pueda construir un front-end basado en PHP para que otras personas administren la creación de cuestionarios. Aunque me complace proporcionar la URL de la página en el siguiente código, pero lo siento: hasta que solucione este problema, no puedo publicarlo públicamente, por lo que no puede acceder a él.

Mi objetivo:

Cuando se muestra el resultado de la prueba, también debe tener los botones para compartir de Facebook y Twitter que se han personalizado para incluir una imagen, título y descripción que sea apropiada para el resultado del cuestionario del usuario.

El botón de Twitter fue fácil de hacer dinámicamente

Solo uso jQuery para crear un botón de Twitter usando el mismo HTML que en cualquier otro lugar, con mi descripción dinámica como propiedad de data-text y luego llamo a twttr.widgets.load(); para activar el botón.

El botón Facebook Share es el problema

• No puedo agregar un botón de compartir "normal" : solo se necesita una propiedad, la URL (no cambia según el resultado de la prueba).
• Tampoco puedo cambiar las etiquetas genéricas de Open Graph que existen en la página, aunque jQuery puede hacer esto, el almacenamiento en caché de Facebook significa que no tiene sentido. Además, los botones genéricos para compartir (FB / Twitter / G +) en cada página no deberían verse afectados y siempre compartirán las etiquetas OG predeterminadas.

Entonces, lo que estoy haciendo es crear un enlace y anexarlo a la página con jQuery, y luego establecer la acción de activación del clic con jQuery también. La ID de aplicación ya se configuró correctamente con el bloque de código FB.init (). Estos son los métodos que he probado para el clic disparador:

Intento 1: FB.ui({ method: "feed" })

FB.ui({
  method: ''feed'',
  name: "I got "+response.country+"! Which European are you destined to date?",
  link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  picture: response.image,
  description: response.body
});

El trabajo básico: imagen, título y descripción están en línea con el resultado del cuestionario (en este caso, "francés"). PERO el diálogo de alimentación no solo se desaprobó, sino que también es muy inferior al diálogo Compartir (ver a continuación). Me gustaría hacer esto correctamente

Intento 2: FB.ui({ method: "share" })

FB.ui({
  method: ''share'',
  href: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  name: "I got "+response.country+"! Which European are you destined to date?",
  picture: response.image,
  description: response.body
});

El cuadro de diálogo Compartir es actual y puede ver las mejoras en el diseño y la funcionalidad en comparación con el cuadro de diálogo de feed desaprobado. Pero en este uso básico es como un botón de compartir de forma regular, y a pesar de mis intentos de proporcionar información adicional, solo se utiliza la URL y las etiquetas genéricas de Open Graph de la página proporcionan el contenido.

Intento 3: FB.ui({ method: "share_open_graph" })

Este parece ser el que debo usar. ¡Solo necesito averiguar cómo! * He agregado: "cuestionario" como un tipo de objeto a mi aplicación (nombre: matchadviceuk). * He agregado: "Compartir una prueba" como tipo de historia a mi aplicación, según la opción "prueba" y el tipo de acción "Compartir" existente. * He agregado: el contenido del Open Graph prefix="" apropiado a mi declaración de <head>

La función de hacer clic en el botón ahora se ve así:

FB.ui({
  method: ''share_open_graph'',
  action_type: ''matchadviceuk:share'',
  action_properties: JSON.stringify({
    type: ''matchadviceuk:quiz'',
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
    title: "I got "+response.country+"! Which European are you destined to date?",
    description: response.body,
    image: response.image
  })
});

Al hacer clic esto produce:

Así que cambié url en el código anterior para quiz y obtengo:

Esto está comenzando a tener sentido: la página en sí ES un artículo, y eso no puede cambiar. Así que tal vez no quiero usar este nuevo tipo de objeto "quiz". Pero si vuelvo al bloque anterior y simplemente cambio el type a matchadviceuk:article , obtenemos el mismo error acerca de que el "cuestionario" no está definido: en este punto esto no tiene sentido ya que el tipo de objeto "cuestionario" ahora no se menciona en cualquier parte del código! (Posible víctima del almacenamiento en caché de Facebook, que es una complicación adicional).

Y aquí es donde estoy atrapado más allá de cualquier idea adicional. Incluso intenté eliminar por completo los atributos de type y url , con la esperanza de que Facebook pudiera hacer lo suyo, pero no.

Todavía no estoy convencido de que mis esfuerzos para agregar tipo de objeto y tipo de historia a mi aplicación fueran incluso necesarios, pero de cualquier manera, simplemente no puedo hacer que esto funcione. ¡Por favor ayuda!

Comparar con:

Es Buzzfeed quien hace este tipo de cuestionarios mucho, y en realidad hacen un trabajo pesado al usar un enlace sharer.php de Facebook con el contenido dinámico suministrado como parte de la cadena de consulta URL, y forzándolo a abrir en una nueva ventana manualmente. Es feo, no "oficial", no es tan fácil de usar, y me atrevo a decir que posiblemente presenta problemas en la navegación por dispositivos móviles y tabletas. Por todas estas razones, preferiría hacerlo correctamente con FB.ui, no solo eso, sino que sharer.php está en un flujo constante de "¿está o no está obsoleto?" e incluso la línea de desarrollador oficial de FB (no se puede agregar un enlace debido a la falta de reputación), es que no funcionará así por mucho tiempo.

Investigación:

He hecho toneladas de búsquedas en Google Overflow y Stack Overflow. Nada coincide con mi problema (lo cual me sorprende, pero tengo limitaciones adicionales como tener que hacer todo este proceso de forma dinámica sin páginas de resultados separadas con infusión de PHP). Esta pregunta es el único resultado en SO para "share_open_graph" y crea un objeto con FB.api y luego lo publica con FB.ui; suena bien aparte del hecho de que esto produce múltiples publicaciones en el feed del usuario, lo que resultaría en una prohibición de Facebook. Este usuario pudo confiar en PHP donde necesito interactividad pura con el cliente.

Answer 1

La propiedad ''prueba'' requiere un objeto de og: escriba ''matchadviceuk: quiz''. "Esto está comenzando a tener sentido, la página en sí ES un artículo

Usted estuvo aquí. Después de eso, fui a la plantilla de página a la que se hacía referencia en el parámetro ''url'' de ''action_properties'' y añadí

<meta property="og:type" content="myapp:mytype" />

En tu caso, sería

<meta property="og:type" content="matchadviceuk:quiz" /> 

Eso es todo, compartir a través de FB.ui funciona

Por supuesto, su servidor en desarrollo debe tener una dirección http externa (yo uso http://ngrok.com para tales cosas)

Editar: de todos modos, debe agregar un parámetro extra a la url según el cual rellenar datos específicos en og: title, og: description, og: metaetiquetas de imagen en la página porque no parece que el título, la descripción y los parámetros de imagen en action_properties en realidad trabajo, por ejemplo

...
action_properties: JSON.stringify({
    ...
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date?" + response.country_id,
    ...

Answer 2

Estaba teniendo un problema similar y su pregunta detallada me ayudó mucho a encontrar una solución, gracias por publicarla.

Como sugiere, cree la acción personalizada y el objeto personalizado relacionado con la acción en la configuración de la aplicación en FB. En su caso, la acción es "compartir" y el objeto es "cuestionario". Y debe tener una historia como "John Doe compartió un cuestionario a través de Some-awesome-app".

En su código JS básicamente está contando a Facebook esta historia.

FB.ui({
  method: ''share_open_graph'', 
  action_type: ''matchadviceuk:share'',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    // The action properties
  })
});

Ya le dijo a FB que su historia tiene el objeto ''prueba'', con la acción ''compartir''. Entonces, primero dígale dónde está este objeto ''cuestionario''.

FB.ui({
  method: ''share_open_graph'', 
  action_type: ''matchadviceuk:share'',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: ''http://example.com/quizItem'' // customObjectProperties (found when editing your object in the fb dev portal, looks like `og:quiz`). Note: from what I can tell, every object with name `myObject` will have a `og:myObject` property.
  })
});

Ahora FB sabe dónde está este objeto ''quiz''. El siguiente paso es tener un objeto ''cuestionario'' en esa ubicación. Puede crear una página HTML o PHP en esa URL. Es una página HTML normal con algunas metaetiquetas adicionales. Esas metaetiquetas hacen que su página sea reconocida como un objeto "cuestionario". A continuación se muestra un ejemplo de código HTML y comentarios:

<html>
    <head>
        <meta property="og:type" content="quiz">
        <!-- this tells that the page is a quiz -->

        <meta property="og:title" content="Some page title" >
        <!-- your page must have a title for sharing -->

        <!-- you can also use og:description and og:image if you want to change more but they are optional. Again you can find these when you edit your custom object -->
        ...

Ahora la página HTML (o PHP) en esa URL es reconocida como un objeto ''cuestionario'' por FB.

En mi caso, necesitaba pasar algunas variables para compartir el diálogo también. Por lo tanto, utilicé una página PHP como el objeto. Desde JS hago una llamada con una consulta en línea y leo los parámetros GET en mi PHP. entonces el JS se vuelve como:

FB.ui({
  method: ''share_open_graph'', 
  action_type: ''matchadviceuk:share'',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: ''http://example.com/quizItem?country=<populated country name>''
  })
});

Y el archivo PHP es algo así como

<?php
    $country = $_GET[''country''];
?>
<html>
    <head>
        <meta property="og:type" content="quiz">
        <meta property="og:title" content="Quiz from <?php echo $country; ?>" >
        ...

Espero que esto ayude. ¡Aclamaciones!

Answer 3

He terminado con el método share_open_graph con un objeto como este ,,

FB.ui({
    method: ''share_open_graph'',
    action_type: ''og.shares'',
    action_properties: JSON.stringify({
        object : {
           ''og:url'': ''http://astahdziq.in/'', // your url to share
           ''og:title'': ''Here my custom title'',
           ''og:description'': ''here custom description'',
           ''og:image'': ''http://example.com/link/to/your/image.jpg''
        }
    })
    },
    // callback
    function(response) {
    if (response && !response.error_message) {
        // then get post content
        alert(''successfully posted. Status id : ''+response.post_id);
    } else {
        alert(''Something went error.'');
    }
});

Answer 4

Tengo exactamente el mismo problema. Terminó teniendo que usar FB.api en lugar de FB.ui

Aquí hay un ejemplo donde se usa para publicar una acción og: me gusta: https://developers.facebook.com/docs/opengraph/getting-started

Solo tiene que personalizar la acción y el objeto para publicar su propia historia personalizada.

Para mí, el problema con esto es que se publican sin preguntar primero con una ventana emergente como funcionan los botones de compartir convencionales.

Answer 5

el objeto debe ser, bueno, un objeto

FB.ui({
  method: ''share_open_graph'',
  action_type: ''matchadviceuk:share'',
  action_properties: JSON.stringify({
    ''quiz'': {
       ''og:type'': ''matchadviceuk:quiz'',
       ''og:url'': "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
       ''og:title'': "I got "+response.country+"! Which European are you destined to date?",
       ''og:description'': response.body,
       ''og:image'': response.image
    }
  })
}, function(){});