使用“share_open_graph”Facebook UI为测验结果创builddynamic共享对话框
简介：我的问题是通过share_open_graph方法让FB.ui根据用户在页面上的操作创build一个包含不同标题，描述和图片的自定义共享对话框。
问题是我的第一个，我没有声望，所以无数的链接被删除，但（感谢大家谁给了我upvotes）我已经能够拯救截图，最初失踪。
编辑：我结束了不得不使用一个普通的popup窗口与共享对话框，它不是理想的，但至less它可靠地工作。 我越查看networking，我越发现许多备受尊崇的网站仍然使用这种popup式共享，所以我认为在这种情况下，使用传统解决scheme的优势超过了寻找适当解决scheme的广泛工作，我使用https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2通过URL查询提供的dynamic详细信息，至less比sharer.php的使用情况更新看着Buzzfeed。
我的页面：
我有一个测验。 十个问题，每个答案五个，结果产生五个选项中的一个作为“结果”。 测验的一切都很好。 当通过Ajax / jQuery完成测验时，结果会被拉进来 – 这样我们将来可以为其他人构build一个基于PHP的前端来pipe理测验的创build。 虽然我很高兴在下面的代码中提供页面的URL，但是很抱歉 – 直到我解决这个问题，我无法公开发布，所以你不能访问它！
我的目标：
当显示测验的结果时，还应该有Facebook和Twitter共享button，这些button被定制为包括适合用户测验结果的图片，标题和描述。
Twitterbutton很容易做到dynamic
我只是使用jQuery创build一个Twitterbutton，使用与任何地方相同的HTML，我的dynamic描述作为data-text属性提供，然后调用twttr.widgets.load(); 激活button。
Facebook分享button是问题
- 我不能添加一个“正常的”共享button – 它只有一个属性，URL（不会改变每个测验结果）。
- 我无法更改页面上存在的通用Open Graph标记，尽pipejQuery可以做到这一点，但是Facebook的caching意味着它没有意义。 此外，每个页面上的通用共享button（FB / Twitter / G +）应该保持不受影响，并始终共享默认的OG标签。
所以我正在做的是创build一个链接，并用jQuery将其附加到页面上，然后用jQuery设置点击触发器动作。 应用程序ID已经用FB.init（）代码块成功设置。 这些是我尝试点击触发器的方法：
尝试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 });
基本的工作 – 图片，标题和描述都符合测验结果（在本例中为“法语”） – 但是 Feed对话不仅被弃用，而且也远不如Share对话（见下文）。 我想正确地做到这一点。
尝试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 });
“ 共享”对话框是最新的，您可以看到与已弃用的“对话框”相比在devise和function方面的改进。 但是在这个基本用法中，它就像一个常规的共享button，尽pipe我试图提供额外的信息，但是只使用了URL，并且来自页面的通用Open Graph标签提供了内容。
尝试3： FB.ui({ method: "share_open_graph" })
这似乎是我必须使用的一个。 我只需要制定出如何！ *我已经添加：作为对象types的“测验”到我的应用程序（名称：matchadviceuk）。 *我已经添加了：根据“测验”选项和现有的“共享”操作types，将故事types“分享测验”添加到我的应用程序中。 *我添加了：适当的Open Graph prefix=""内容到我的<head>声明
button上的点击function现在看起来像：
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 }) });
点击后会产生：
所以我改变了上述代码中的url来quiz ，我得到：
这是开始有意义的 – 页面本身是一篇文章，并没有不能改变。 所以也许我不想使用这个新的“测验”对象types。 但是，如果我回到上面的块，只是改变type matchadviceuk:article ，我们得到同样的错误关于“测验”没有被定义 – 在这一点上，这是毫无意义的，因为“测验”对象types现在没有提到代码中的任何地方！ （可能是Facebookcaching的受害者，这是一个额外的复杂。）
在这里，我被困在了更远的地方。 我甚至试图完全删除type和url属性，希望Facebook可以做自己的事情，但没有。
我还没有确信，我的努力添加对象types和故事types到我的应用程序甚至是必要的，但无论如何，我只是无法得到这个工作。 请帮忙！
相比于：
Buzzfeed是经常进行这类测验的，他们实际上做了一个使用Facebook sharer.php链接的动作，将dynamic内容作为URL查询string的一部分提供，并强制手动打开新窗口。 这是丑陋的，不是“官方”，不是用户友好的，我敢说可能会出现在手机和平板电脑浏览问题。 由于所有这些原因，我更喜欢用FB.ui来做到这一点 – 不仅如此，sharer.php也是一个持续不断的stream行“是或不是不被弃用？ 甚至是官方的FB开发人员（不能因为没有声望而添加链接） – 是不会长时间工作的。
研究：
我做了大量的谷歌search和堆栈溢出search。 没有什么比我的问题（这令我感到惊讶，但我有额外的限制，如需要做dynamic处理，没有单独的PHP注入结果页）。 这个问题是“share_open_graph”上SO的唯一结果，然后用FB.api创build一个对象，然后用FB.ui发布 – 听起来不错，除此之外，这会产生多个post给用户的feed，这会导致禁止Facebook的。 这个用户能够依赖于PHP，我需要纯粹的客户端交互。
我用这样的对象做了share_open_graph方法，
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.'); } });
属性“测验”需要一个og的对象：type'matchadviceuk：quiz'。“这开始有意义 – 页面本身是一篇文章
你就在这里 之后，我去了'action_properties'的'url'参数中引用的页面模板并添加
<meta property="og:type" content="myapp:mytype" />
在你的情况下，将是
<meta property="og:type" content="matchadviceuk:quiz" />
这就是所有，通过FB.ui工作分享
当然你的开发服务器应该有外部http地址（我使用http://ngrok.com这样的东西）;
编辑：无论如何，你应该添加额外的参数到URL根据其中填充og：title，og：description，og：image meta标签中的特定数据，因为它似乎并没有在action_properties中的标题，描述和图像参数工作，例如
... action_properties: JSON.stringify({ ... url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date?" + response.country_id, ...
我有一个类似的问题，你的详细的问题帮了我很多，想出了一个解决scheme，感谢推出。
正如您所build议的，您可以在FB中的应用程序设置中创build与该操作相关的自定义操作和自定义对象。 在你的情况下，行动是“分享”，对象是“测验”。 而且你应该有一个像“John Doe通过Some-awesome-app分享测验”的故事。
在你的JS代码中，你基本上是在告诉Facebook这个故事。
FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', // appNameSpace:myCustomAction action_properties: JSON.stringify({ // The action properties }) });
你已经告诉FB你的故事有“测验”的对象，“分享”的行动。 所以，首先告诉它“测验”对象在哪里。
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. }) });
现在FB知道这个“测验”对象在哪里。 下一步是在该位置有一个“测验”对象。 您可以在该URL创build一个HTML或PHP页面。 这是一个普通的HTML页面，有一些额外的元标记。 这些元标记使您的网页被识别为“测验”对象。 以下是一个示例HTML代码和注释：
<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 --> ...
现在，该URL处的HTML（或PHP）页面被FB识别为“测验”对象。
在我的情况下，我需要传递一些variables来共享对话框。 因此我使用了一个PHP页面作为对象。 从JS我用内联查询进行调用，并阅读我的PHP中的GET参数。 所以JS变得像：
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>' }) });
和PHP文件是类似的
<?php $country = $_GET['country']; ?> <html> <head> <meta property="og:type" content="quiz"> <meta property="og:title" content="Quiz from <?php echo $country; ?>" > ...
我希望这有帮助。 干杯!
我有完全一样的问题。 结束了不得不使用FB.api而不是FB.ui
这里有一个例子，它被用来发布一个og：likes操作： https ： //developers.facebook.com/docs/opengraph/getting-started
您只需自定义操作和对象来发布自己的自定义故事。
对我来说，这个问题是，它没有提示他们先popup一个像常规的共享button如何工作的窗口。
该对象必须是一个对象
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(){});
