Utilisation de l’interface utilisateur Facebook «share_open_graph» pour créer une boîte de dialog de partage dynamic pour les résultats du questionnaire

Résumé: Mon problème est que FB.ui , via la méthode share_open_graph , crée une boîte de dialog de partage personnalisée contenant différents titres, descriptions et images, en fonction des actions de l’utilisateur sur la page.

La question était ma première et je n’avais aucune réputation, donc de nombreux liens ont été supprimés, mais (grâce à tous ceux qui m’ont donné des commentaires), j’ai pu sauver les captures d’écran qui manquaient à l’origine.


EDIT: J’ai fini par utiliser une fenêtre contextuelle régulière avec une boîte de dialog de partage, ce n’est pas idéal, mais au moins cela fonctionne de manière fiable. Plus je regardais le Web, plus je trouvais que de nombreux sites respectables de haut niveau utilisaient toujours le partage de popups, alors je pensais que les avantages de l’utilisation d’une solution héritée l’emportaient sur le travail considérable de recherche d’une solution appropriée. https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 avec les détails dynamics fournis via une requête d’URL qui est au moins légèrement plus à jour que l’utilisation de sharer.php à l’origine regarder sur Buzzfeed.


Ma page:

J’ai un quiz. Dix questions, cinq réponses à chacune, un résultat est obtenu en atsortingbuant une des cinq options comme “résultat”. Tout est parfait pour le quiz. Le résultat est extrait lorsque le quiz est terminé via Ajax / jQuery – à l’avenir, je pourrai créer un front-end basé sur PHP pour que d’autres personnes puissent gérer la création de quiz. Bien que je fournisse avec plaisir l’URL de la page dans le code ci-dessous, mais désolé – jusqu’à ce que je corrige ce problème, je ne peux pas le publier publiquement, donc vous ne pouvez pas y accéder!

Mon but:

Lorsque le résultat du questionnaire est affiché, il doit également comporter des boutons de partage Facebook et Twitter qui ont été personnalisés pour inclure une image, un titre et une description adaptés au résultat du test de l’utilisateur.

Le bouton Twitter était facile à faire dynamicment

J’utilise simplement jQuery pour créer un bouton Twitter en utilisant le même code HTML que n’importe twttr.widgets.load(); , avec ma description dynamic fournie comme propriété de data-text , puis appelez twttr.widgets.load(); pour activer le bouton.

Le bouton Partager Facebook est le problème

  • Je ne peux pas append un bouton de partage “normal” – il ne prend qu’une propriété, l’URL (ne change pas le résultat du test).
  • Je ne peux pas non plus changer les balises Open Graph génériques qui existent sur la page – bien que jQuery puisse le faire, la mise en cache de Facebook signifie qu’elle est inutile. De plus, les boutons de partage génériques (FB / Twitter / G +) sur chaque page doivent restr inchangés et partager toujours les balises OG par défaut.

Donc, ce que je fais, c’est de créer un lien et de l’append à la page avec jQuery, puis de définir l’action de déclenchement par clic avec jQuery. L’ID d’application est déjà défini avec le bloc de code FB.init (). Voici les méthodes que j’ai essayées pour le déclencheur de clic:

Tentative 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 }); 

capture d'écran montrant les détails corrects apparaissant, mais dans une boîte de dialogue Flux ancien à moitié travaillée et obsolète

Les bases du travail – image, titre et description sont toutes en ligne avec le résultat du quiz (dans ce cas “French”) – MAIS la boîte de dialog Feed est non seulement obsolète mais également très inférieure à la boîte de dialog Share (voir ci-dessous). Je voudrais le faire correctement.

Tentative 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 }); 

capture d'écran montrant la boîte de dialogue de partage moderne correcte avec les balises OG génériques et non mes détails personnalisés

La boîte de dialog Partager est actuelle et vous pouvez voir les améliorations apscopes à la conception et aux fonctionnalités par rapport à la boîte de dialog Flux obsolète. Mais dans cette utilisation de base, c’est comme un bouton de partage normal, et malgré mes tentatives pour fournir des informations supplémentaires, seules l’URL est utilisée et les balises génériques Open Graph de la page fournissent le contenu.

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

Cela semble être celui que je dois utiliser. J’ai juste besoin de savoir comment! * J’ai ajouté: “quiz” comme type d’object à mon application (nom: matchadviceuk). * J’ai ajouté: “Partager un quiz” comme type de récit à mon application en fonction de l’option “quiz” et du type d’action “Partager” existant. * J’ai ajouté: le prefix="" Open Graph approprié prefix="" contenu à ma déclaration

La fonction de clic sur le bouton ressemble maintenant à:

 FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', action_properties: JSON.ssortingngify({ 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 }) }); 

Sur clic, cela produit:

J’ai donc changé d’ url dans le code ci-dessus en quiz et j’ai:

<img src="http://soffr.miximages.com/jquery/q7s99.png" alt="capture d'écran montrant la boîte d'erreur disant "L'objet à l'URL a og: type de ‘article’. La propriété ‘quiz’ requirejs un object de og: type ‘matchadviceuk: quiz'””>

Cela commence à avoir un sens – la page elle-même est un article, et aucun ne peut changer. Alors peut-être que je ne veux pas utiliser ce nouveau type d’object “quiz”. Mais si je retourne au bloc ci-dessus et que je change simplement de type en matchadviceuk:article , nous obtenons la même erreur concernant la non définition du “quiz” – à ce stade, le type d’object “quiz” n’est plus mentionné n’importe où dans le code! (Victime possible de la mise en cache de Facebook, ce qui est une complication supplémentaire.)

Et voici où je suis coincé au-delà de toute autre idée. J’ai même essayé de supprimer complètement les atsortingbuts de type et d’ url , en espérant que Facebook puisse faire sa propre chose, mais non.

Je ne suis pas encore convaincu que mes efforts pour append le type d’object et le type de récit à mon application étaient même nécessaires, mais de toute façon, je ne peux tout simplement pas obtenir ce résultat. S’il vous plaît aider!

Comparer aux:

C’est Buzzfeed qui effectue ce type de quiz beaucoup, et il fait un travail difficile en utilisant un lien Facebook sharer.php avec le contenu dynamic fourni dans la chaîne de requête URL, et en le forçant à s’ouvrir manuellement dans une nouvelle fenêtre. C’est moche, pas “officiel”, pas aussi facile à utiliser, et j’ose dire que peut-être présente des problèmes sur la navigation mobile et tablette. Pour toutes ces raisons, je préférerais de loin le faire correctement avec FB.ui – non seulement cela, mais sharer.php est dans un stream constant de “est-ce ou n’est-il pas obsolète?” et même la ligne officielle des développeurs FB (ne peut pas append de lien en raison de la non-réputation) – est que cela ne fonctionnera pas ainsi longtemps.

Recherche:

J’ai fait des tonnes de recherches sur Google et Stack Overflow. Rien ne correspond tout à fait à mon problème (ce qui me surprend, mais j’ai des limitations supplémentaires, comme le fait de devoir faire tout ce traitement de manière dynamic sans pages de résultats séparées avec PHP). Cette question est le seul résultat sur SO pour “share_open_graph” et crée un object avec FB.api, puis publie avec FB.ui – sonne bien en dehors du fait que cela produit plusieurs articles dans le stream de l’utilisateur, ce qui entraînerait une interdiction de Facebook. Cet utilisateur a pu s’appuyer sur PHP où j’ai besoin d’une interactivité pure côté client.

J’ai fait avec la méthode share_open_graph avec un tel object,

 FB.ui({ method: 'share_open_graph', action_type: 'og.shares', action_properties: JSON.ssortingngify({ 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.'); } }); 

La propriété ‘quiz’ nécessite un object de type og: type ‘matchadviceuk: quiz’. “Cela commence à avoir un sens – la page elle-même est un article

Vous étiez juste ici. Après cela je suis allé au modèle de page qui a référencé dans le paramètre ‘url’ de ‘action_properties’ et ajouté

  

Dans votre cas ce serait

  

C’est tout, partager à travers les œuvres de FB.ui

Bien sûr, votre serveur de développement doit avoir une adresse http externe (j’utilise http://ngrok.com pour de telles choses)

Edit: de toute façon, vous devez append des parameters supplémentaires à l’URL en fonction des données spécifiques contenues dans og: title, og: description, og: balises meta sur la page, car il ne semble pas que les parameters title, description et image travail, par exemple

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

J’avais un problème similaire et votre question détaillée m’a beaucoup aidé à trouver une solution, merci de l’avoir mise en ligne.

Comme vous le suggérez, créez l’action personnalisée et l’object personnalisé liés à l’action dans les parameters de l’application dans FB. Dans votre cas, l’action est “share” et l’object est “quiz”. Et vous devriez avoir une histoire comme “John Doe a partagé un quiz via Some-awesome-app”.

Dans votre code JS, vous racontez essentiellement cette histoire à Facebook.

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

Vous avez déjà dit à FB que votre histoire avait l’object «quiz», avec l’action «partager». Donc, d’abord, vous lui dites où se trouve l’object «quiz».

 FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', // appNameSpace:myCustomAction action_properties: JSON.ssortingngify({ 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. }) }); 

Maintenant, FB sait où se trouve l’object “quiz”. L’étape suivante consiste à avoir un object «quiz» à cet endroit. Vous pouvez créer une page HTML ou PHP sur cette URL. C’est une page HTML normale avec quelques balises méta supplémentaires. Ces balises meta rendent votre page reconnue comme un object «quiz». Voici un exemple de code HTML et de commentaires:

        ... 

Maintenant, la page HTML (ou PHP) de cette URL est reconnue comme object «quiz» par FB.

Dans mon cas, je devais transmettre certaines variables pour partager la boîte de dialog. J’ai donc utilisé une page PHP comme object. Depuis JS, je passe un appel avec une requête en ligne et je lis les parameters GET dans mon PHP. alors le JS devient comme:

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

Et le fichier PHP est quelque chose comme

      ... 

J’espère que ça aide. À votre santé!

J’ai exactement le même problème. Fini devoir utiliser FB.api au lieu de FB.ui

Il y a un exemple ici, où il est utilisé pour poster un og: aime l’action: https://developers.facebook.com/docs/opengraph/getting-started

Il vous suffit de personnaliser l’action et l’object pour publier votre propre histoire personnalisée.

Pour moi, le problème est que cela affiche sans les inviter d’abord avec une fenêtre contextuelle comme comment fonctionnent les boutons de partage classiques.

l’object doit être, eh bien, un object

 FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', action_properties: JSON.ssortingngify({ '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(){});