jQuery 使用“share_open_graph”Facebook UI 为测验结果创建动态共享对话框

Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results

提问by Matt Morrison

Summary:My problem is getting FB.ui, via the share_open_graphmethod, to create a customised share dialog that contains different title, description, and picture, based on the user's actions on the page.

摘要：我的问题是通过share_open_graph方法获取FB.ui以根据用户在页面上的操作创建包含不同标题、描述和图片的自定义共享对话框。

The question was my first and I had no reputation, so numerous links were removed, but (thanks to everyone who gave me upvotes) I have been able to rescue the screenshots that were originally missing.

这是我的第一个问题，我没有声誉，因此删除了许多链接，但是（感谢所有给我投票的人）我已经能够挽救最初丢失的屏幕截图。

---

---

EDIT:I ended up having to just use a regular popup window with a share dialog in it, it's not ideal but at least it works reliably. The more I looked around the web the more I found that many high profile respectable sites were still using popup sharing like this, so I figured in this case the advantages of using a legacy solution outweighed the extensive work in finding a proper solution, I used https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2with dynamic details supplied via URL query which is at least slightly more up-to-date than the sharer.php usage I was originally looking at on Buzzfeed.

编辑：我最终只需要使用一个带有共享对话框的常规弹出窗口，这并不理想，但至少它可以可靠地工作。我在网上浏览得越多，我就越发现许多知名网站仍在使用这样的弹出式共享，所以我认为在这种情况下，使用遗留解决方案的优势超过了寻找合适解决方案的大量工作，我使用了https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2带有通过 URL 查询提供的动态详细信息，这至少比我最初使用的 sharer.php 的用法稍微更新在 Buzzfeed 上看。

---

---

My page:

我的页面：

I have a quiz. Ten questions, five answers to each, a result is produced assigning one of five options as the "result". Everything as far as the quiz works great. The result is pulled in when quiz is completed via Ajax/jQuery - this is so that in the future I will be able to build a PHP-based front-end for other people to manage the creation of quizzes. Whilst I happily provide the page URL in the code below, but sorry - until I fix this issue I can't publish it publicly, so you can't access it!

我有一个测验。十个问题，每个问题五个答案，产生一个结果，指定五个选项之一作为“结果”。就测验而言，一切都很好。当测验通过 Ajax/jQuery 完成时，结果会被提取出来——这样将来我就可以为其他人构建一个基于 PHP 的前端来管理测验的创建。 虽然我很高兴在下面的代码中提供了页面 URL，但很抱歉 - 在我解决这个问题之前我不能公开发布它，所以你不能访问它！

My aim:

我的目标：

When the result of the quiz is shown, it should also have Facebook and Twitter share buttons which have been customised to include a picture, title, and description that is appropriate to the user's quiz result.

显示测验结果时，还应具有 Facebook 和 Twitter 共享按钮，这些按钮已自定义为包含适合用户测验结果的图片、标题和说明。

Twitter button was easy to do dynamically

Twitter按钮很容易动态地做

I just use jQuery to create a Twitter button using the same HTML as one would anywhere, with my dynamic description supplied as the data-textproperty, and then call twttr.widgets.load();to activate the button.

我只是使用 jQuery 创建一个 Twitter 按钮，使用与任何地方相同的 HTML，我的动态描述作为data-text属性提供，然后调用twttr.widgets.load();以激活按钮。

The Facebook Share button is the problem

Facebook 分享按钮是问题所在

• I can't add a "normal"share button - it only takes one property, the URL (doesn't change per quiz result).
• I can't change the generic Open Graph tags that exist on the page either - although jQuery can do this, Facebook's caching means it is pointless. Plus the generic sharing buttons (FB/Twitter/G+) on every page should remain unaffected and always share the default OG tags.

• 我无法添加“普通”共享按钮 - 它只需要一个属性，即 URL（不会根据测验结果而改变）。
• 我也无法更改页面上存在的通用 Open Graph 标签——尽管 jQuery 可以做到这一点，但 Facebook 的缓存意味着它毫无意义。此外，每个页面上的通用共享按钮 (FB/Twitter/G+) 应保持不受影响，并始终共享默认的 OG 标签。

So what I am doing is creating a link and appending it to the page with jQuery, and then setting the click trigger action with jQuery too. App ID is already successfully set with the FB.init() block of code. These are the methods I have tried for the click trigger:

所以我正在做的是创建一个链接并使用 jQuery 将其附加到页面，然后也使用 jQuery 设置点击触发操作。已使用 FB.init() 代码块成功设置了 App ID。这些是我为点击触发器尝试过的方法：

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

尝试 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
});

The basics work - picture, title and description are all in line with the quiz result (in this case "French") - BUTthe Feed dialog is not only deprecated but also hugely inferior to the Share dialog (see below). I'd like to do this properly.

基础工作 - 图片、标题和描述都与测验结果一致（在这种情况下为“法语”） -但Feed 对话框不仅已弃用，而且与共享对话框相比也大大逊色（见下文）。我想正确地做到这一点。

Attempt 2: FB.ui({ method: "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
});

The Share dialogis current, and you can see the improvements in design and functionality compared to the deprecated Feed dialog. But in this basic usage it is just like a regular share button, and despite my attempts to provide extra information only the URL is used and the generic Open Graph tags from the page provide the content.

在分享对话框是最新的，你可以看到相比弃用的饲料对话框的设计和功能的改进。但在这个基本用法中，它就像一个普通的分享按钮，尽管我试图提供额外的信息，但只使用了 URL，页面中的通用 Open Graph 标签提供了内容。

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

尝试 3： FB.ui({ method: "share_open_graph" })

This seems to be the one I must use. I just need to work out how! * I've added: "quiz" as an object type to my app (name: matchadviceuk). * I've added: "Share a quiz" as a story type to my app based on the "quiz" option and the existing "Share" action type. * I've added: the appropriate Open Graph prefix=""content to my <head>declaration

这似乎是我必须使用的。我只需要弄清楚如何！* 我已添加：“测验”作为我的应用程序的对象类型（名称：matchadviceuk）。* 我已根据“测验”选项和现有的“分享”操作类型将“分享测验”作为故事类型添加到我的应用程序中。* 我已添加：适当的开放图谱prefix=""内容到我的<head>声明

The click function on the button now looks like:

按钮上的点击功能现在看起来像：

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

Upon click this produces:

点击后会产生：

So I changed urlin the above code to quizand I get:

所以我url在上面的代码中更改为quiz：

This is starting to make sense - the page itself IS an article, and no that can't change. So maybe I don't want to use this new "quiz" object type at all. But if I go back to the block above and just change typeto matchadviceuk:article, we get the same error about "quiz" not being defined - at this point this makes zero sense whatsoever as the "quiz" object type is now not mentioned anywhere in the code! (Possible victim of Facebook caching, which is an added complication.)

这开始变得有意义了——页面本身就是一篇文章，没有什么不能改变的。所以也许我根本不想使用这个新的“测验”对象类型。但是，如果我回到上面的块并更改type为matchadviceuk:article，我们会得到关于未定义“测验”的相同错误 - 在这一点上，这是零意义的，因为现在代码中的任何地方都没有提到“测验”对象类型！（Facebook 缓存的可能受害者，这是一个额外的复杂性。）

And here is where I am stuck beyond any further idea. I've even tried removing typeand urlattributes entirely, hoping Facebook could do its own thing, but no.

这就是我无法再有任何想法的地方。我什至尝试完全删除type和url属性，希望 Facebook 可以做自己的事情，但没有。

I'm not still convinced that my efforts to add object type and story type to my app were even necessary, but either way, I just cannot get this working. Please help!

我仍然不相信我为我的应用程序添加对象类型和故事类型的努力是必要的，但无论哪种方式，我都无法使其正常工作。请帮忙！

Compare to:

相比于：

It's Buzzfeed who do these type of quizzes a lot, and they actually do a bodge job of using a Facebook sharer.phplink with the dynamic content supplied as part of the URL query string, and forcing it to open in a new window manually. It's ugly, not "official", not as user friendly, and I dare say possibly presents problems on mobile and tablet browsing. For all these reasons, I'd much prefer to do it properly with FB.ui - not only that but sharer.php is in a constant flux of "is it or isn't it deprecated?" and even the official FB developer line (can't add link due to no reputation) - is that it won't work like this for long.

Buzzfeed 经常进行这些类型的测验，他们实际上在使用 Facebook sharer.php链接以及作为 URL 查询字符串的一部分提供的动态内容，并强制它在新窗口中手动打开是一项艰巨的工作。它很丑陋，不是“官方”，不是用户友好的，我敢说可能会在移动和平板电脑浏览上出现问题。由于所有这些原因，我更喜欢用 FB.ui 正确地做这件事——不仅如此，而且 sharer.php 一直处于“它是否已被弃用？”的不断变化中。甚至官方的 FB 开发人员系列（由于没有声誉而无法添加链接）-它不会像这样长时间工作。

Research:

研究：

I've done tons of Googling and Stack Overflow searching. Nothing quite matches my issue (which surprises me but I do have extra limitations like needing to do all this processing dynamically without separate PHP-infused results pages). This questionis the only result on SO for "share_open_graph" and creates an object with FB.api and then publishes with FB.ui - sounds good apart from the fact this produces multiple posts to the user's feed, which would result in a ban from Facebook. This user was able to rely on PHP where I need pure client-side interactivity.

我已经完成了大量的谷歌搜索和堆栈溢出搜索。没有什么完全符合我的问题（这让我感到惊讶，但我确实有额外的限制，比如需要在没有单独的 PHP 注入的结果页面的情况下动态地进行所有这些处理）。这个问题是 SO 上“share_open_graph”的唯一结果，并使用 FB.api 创建一个对象，然后使用 FB.ui 发布 - 听起来不错，除了这会向用户的提要产生多个帖子，这将导致禁止Facebook。在我需要纯客户端交互性的地方，该用户能够依赖 PHP。

回答by Lafif Astahdziq

I have done with share_open_graphmethod with object like this,,

我已经完成了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.');
    }
});

回答by Andrey Shamakhov

The property 'quiz' requires an object of og:type 'matchadviceuk:quiz'." This is starting to make sense - the page itself IS an article

'quiz' 属性需要一个 og:type 'matchadviceuk:quiz' 对象。” 这开始变得有意义了 - 页面本身就是一篇文章

You were right here. After that I went to page template which referenced in 'url' parameter of 'action_properties' and added

你就在这里。之后，我转到在“action_properties”的“url”参数中引用的页面模板并添加

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

In your case it would be

在你的情况下，这将是

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

That's all, sharing through FB.ui works

就是这样，通过FB.ui分享作品

Of course your developing server should have external http address (I use http://ngrok.comfor such things)

当然你的开发服务器应该有外部 http 地址（我使用http://ngrok.com 来做这些事情）

Edit: anyway you should add extra parameter to the url according to which populate specific data in og:title, og:description, og:image meta tags on the page because it doesn't seem that title, description and image parameters in action_properties actually work, e.g.

编辑：无论如何，您应该根据在页面上的 og:title、og:description、og:image 元标记中填充特定数据的情况向 url 添加额外参数，因为实际上 action_properties 中的标题、描述和图像参数似乎并不工作，例如

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

回答by Doruk Eker

I was having a similar issue and your detailed question helped me a lot to come up with a solution, thanks for putting out there.

我遇到了类似的问题，您的详细问题对我提出解决方案很有帮助，感谢您提出解决方案。

As you suggest you create the custom action and the custom object related to the action in app settings in FB. In your case action is "share" and object is "quiz". And you should have a story such as "John Doe shared a quiz via Some-awesome-app".

正如您建议您在 FB 的应用程序设置中创建自定义操作和与该操作相关的自定义对象。在您的情况下，操作是“分享”，对象是“测验”。你应该有一个故事，比如“John Doe 通过 Some-awesome-app 分享了一个测验”。

In your JS code you are basically telling Facebook this story.

在您的 JS 代码中，您基本上是在向 Facebook 讲述这个故事。

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

You already told FB that your story has the 'quiz' object, with the 'share' action. So first you tell it where this 'quiz' object is.

您已经告诉 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.
  })
});

Now FB knows where this 'quiz' object is. Next step is to have a 'quiz' object at that location. You can create an HTML or PHP page at that URL. It is a normal HTML page with some additional meta tags. Those meta tags makes your page to be recognised as a 'quiz' object. Below is a sample HTML code and comments:

现在 FB 知道这个“测验”对象在哪里。下一步是在该位置放置一个“测验”对象。您可以在该 URL 上创建 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 -->
        ...

Now the HTML (or PHP) page at that URL is recognised as a 'quiz' object by FB.

现在该 URL 处的 HTML（或 PHP）页面被 FB 识别为“测验”对象。

In my case I needed to pass some variables to share dialog as well. Therefore I used a PHP page as the object. From JS I make a call with an inline query and read that GET parameters in my PHP. so the JS becomes like:

就我而言，我还需要传递一些变量来共享对话框。因此我使用了一个 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>'
  })
});

And PHP file is something like

而 PHP 文件就像

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

I hope this helps. Cheers!

我希望这有帮助。干杯!

回答by pocesar

the object must be, well, an object

对象必须是一个对象

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(){});

回答by user3634146

I have the exact same problem. Ended up having to use FB.api instead of FB.ui

我有完全一样的问题。最终不得不使用 FB.api 而不是 FB.ui

There's an example here, where it's being used to post an og:likes action: https://developers.facebook.com/docs/opengraph/getting-started

这里有一个例子，它被用来发布一个 og:likes 动作：https: //developers.facebook.com/docs/opengraph/getting-started

You just have to customize the action and object to post your own custom story.

您只需要自定义操作和对象即可发布您自己的自定义故事。

For me, the problem with this is that it posts without prompting them first with a popup window like how conventional share buttons work.

对我来说，问题在于它发布时没有先用弹出窗口提示他们，就像传统共享按钮的工作方式一样。