Utilisation de l'interface utilisateur Facebook "share_open_graph" pour créer une boîte de dialogue de partage dynamique pour les résultats du quiz
Résumé: Mon problème devient FB.ui , via le méthode share_open_graph , pour créer une boîte de dialogue de partage personnalisée contenant un titre, une description et une image différents, 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 votes positifs), j'ai pu récupérer les captures d'écran qui manquaient à l'origine.
EDIT: J'ai fini par devoir simplement utiliser une fenêtre contextuelle régulière avec une boîte de dialogue de partage, ce n'est pas idéal mais au moins cela fonctionne de manière fiable. Plus je regardais sur le Web, plus je trouvais que de nombreux sites respectables de haut niveau utilisaient toujours le partage de popup comme celui-ci, donc j'ai compris dans ce cas que les avantages d'utiliser une solution héritée l'emportaient sur le travail considérable pour trouver une solution appropriée, j'ai utilisé https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 avec des détails dynamiques fournis via une requête URL qui est au moins légèrement plus à jour que le utilisation de sharer.php que je regardais à l'origine sur Buzzfeed.
Ma page:
J'ai un quiz. Dix questions, cinq réponses à chacune, un résultat est produit en assignant une des cinq options comme "résultat". Tout ce qui concerne le quiz fonctionne très bien. Le résultat est tiré lorsque le quiz est terminé via Ajax/jQuery - c'est ainsi qu'à l'avenir je serai en mesure de construire 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, vous ne pouvez donc pas y accéder!
Mon but:
Lorsque le résultat du quiz est affiché, il devrait également avoir des boutons de partage Facebook et Twitter qui ont été personnalisés pour inclure une image, un titre et une description appropriés au résultat du quiz de l'utilisateur.
Le bouton Twitter était facile à faire de manière dynamique
J'utilise simplement jQuery pour créer un bouton Twitter en utilisant le même code HTML que n'importe où, avec ma description dynamique fournie en tant que propriété data-text, Puis j'appelle twttr.widgets.load(); pour activer le bouton.
Le bouton Facebook Share est le problème
- Je ne peux pas ajouter un bouton de partage "normal" - il ne prend qu'une seule propriété, l'URL (ne change pas par résultat de quiz).
- Je ne peux pas non plus modifier 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 ne doivent pas être affectés et partagent toujours les balises OG par défaut.
Donc, ce que je fais, c'est créer un lien et l'ajouter à la page avec jQuery, puis définir également l'action de déclenchement du clic avec jQuery. L'ID d'application est déjà défini avec succès 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
});
Le travail de base - l'image, le titre et la description sont tous en ligne avec le résultat du quiz (dans ce cas "français") - [~ # ~] mais [~ # ~] la boîte de dialogue Flux est non seulement obsolète, mais également très inférieure à la boîte de dialogue Partager (voir ci-dessous). J'aimerais bien faire ça.
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
});
La boîte de dialogue Partager est actuelle, et vous pouvez voir les améliorations dans la conception et les fonctionnalités par rapport à la boîte de dialogue obsolète Feed. Mais dans cette utilisation de base, c'est comme un bouton de partage normal, et malgré mes tentatives pour fournir des informations supplémentaires, seule 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'objet à mon application (nom: matchadviceuk). * J'ai ajouté: "Partager un quiz" comme type d'histoire à mon application en fonction de l'option "quiz" et du type d'action "Partager" existant. * J'ai ajouté: le contenu Open Graph prefix="" Approprié à ma déclaration <head>
La fonction de clic sur le bouton ressemble maintenant à:
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
})
});
Au clic, cela produit:
J'ai donc changé url dans le code ci-dessus en quiz et j'obtiens:
Cela commence à avoir un sens - la page elle-même IS un article, et non cela ne peut pas changer. Donc peut-être que je ne veux pas du tout utiliser ce nouveau type d'objet "quiz". Mais si je reviens au bloc ci-dessus et que je change simplement type en matchadviceuk:article, Nous obtenons la même erreur à propos de la définition du "quiz" - à ce stade, cela n'a aucun sens que le " le type d'objet quiz "n'est plus mentionné nulle part dans le code! (Victime possible de la mise en cache Facebook, ce qui est une complication supplémentaire.)
Et c'est là que je suis coincé au-delà de toute autre idée. J'ai même essayé de supprimer complètement les attributs type et url, en espérant que Facebook pourrait faire sa propre chose, mais non.
Je ne suis pas encore convaincu que mes efforts pour ajouter le type d'objet et le type d'histoire à mon application étaient même nécessaires, mais de toute façon, je ne peux tout simplement pas faire fonctionner cela. Veuillez aider!
Comparer aux:
C'est Buzzfeed qui fait beaucoup ce type de quiz, et ils font en fait un travail de bodge en utilisant un lien Facebook sharer.php avec le contenu dynamique fourni dans le cadre de la chaîne de requête URL, et forçant l'ouvrir dans une nouvelle fenêtre manuellement. C'est moche, pas "officiel", pas aussi convivial, et j'ose dire que cela pose peut-être des problèmes de navigation sur 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 flux constant de "est-ce ou n'est-il pas obsolète?" et même la gamme de développeurs FB officielle (ne peut pas ajouter de lien en raison de l'absence de réputation) - est que cela ne fonctionnera pas comme ça pendant 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 dynamiquement sans pages de résultats séparées infusées par PHP). Cette question est le seul résultat sur SO pour "share_open_graph" et crée un objet avec FB.api puis publie avec FB.ui - sonne bien indépendamment du fait cela produit plusieurs publications dans le flux 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 pure interactivité côté client.
J'en ai fini avec share_open_graph méthode avec un objet comme celui-ci ,
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.');
}
});
J'avais un problème similaire et votre question détaillée m'a beaucoup aidé à trouver une solution, merci de l'avoir mis en ligne.
Comme vous le suggérez, vous créez l'action personnalisée et l'objet personnalisé liés à l'action dans les paramètres de l'application dans FB. Dans votre cas, l'action est "partager" et l'objet 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.stringify({
// The action properties
})
});
Vous avez déjà dit à FB que votre histoire avait l'objet 'quiz', avec l'action 'partager'. Alors d'abord, dites-lui où se trouve cet objet "quiz".
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.
})
});
Maintenant, FB sait où se trouve cet objet "quiz". La prochaine étape consiste à avoir un objet "quiz" à cet endroit. Vous pouvez créer une page HTML ou PHP à cette URL. Il s'agit d'une page HTML normale avec quelques balises META supplémentaires. Ces balises META font que votre page soit reconnue comme un objet "quiz". Ci-dessous est un exemple de code HTML et de commentaires:
<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 -->
...
Maintenant, la page HTML (ou PHP) de cette URL est reconnue comme un objet "quiz" par FB.
Dans mon cas, je devais également transmettre certaines variables pour partager la boîte de dialogue. Par conséquent, j'ai utilisé une page PHP comme objet. À partir de JS, j'appelle avec une requête en ligne et je lis les paramètres GET dans mon PHP. Ainsi, le JS devient comme:
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>'
})
});
Et PHP est quelque chose comme
<?php
$country = $_GET['country'];
?>
<html>
<head>
<meta property="og:type" content="quiz">
<meta property="og:title" content="Quiz from <?php echo $country; ?>" >
...
J'espère que ça aide. À votre santé!
La propriété 'quiz' nécessite un objet de og: type 'matchadviceuk: quiz'. "Cela commence à avoir un sens - la page elle-même IS an article
Tu étais ici. Après cela, je suis allé au modèle de page référencé dans le paramètre 'url' de 'action_properties' et j'ai ajouté
<meta property="og:type" content="myapp:mytype" />
Dans votre cas, ce serait
<meta property="og:type" content="matchadviceuk:quiz" />
C'est tout, le partage via FB.ui fonctionne
Bien sûr, votre serveur en développement doit avoir une adresse http externe (j'utilise http://ngrok.com pour de telles choses)
Modifier: de toute façon, vous devez ajouter un paramètre supplémentaire à l'URL selon lequel remplir des données spécifiques dans les balises META og: title, og: description, og: image sur la page car il ne semble pas que les paramètres title, description et image dans action_properties soient réellement travail, par exemple.
...
action_properties: JSON.stringify({
...
url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date?" + response.country_id,
...
l'objet doit être, eh bien, un objet
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(){});
J'ai exactement le même problème. J'ai fini par devoir utiliser FB.api au lieu de FB.ui
Il y a un exemple ici, où il est utilisé pour publier une action og: likes: https://developers.facebook.com/docs/opengraph/getting-started
Il vous suffit de personnaliser l'action et l'objet pour publier votre propre histoire personnalisée.
Pour moi, le problème est qu'il publie sans les demander d'abord avec une fenêtre contextuelle comme le fonctionnement des boutons de partage conventionnels.