logo标签列表

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

jqueryfacebookfacebook-graph-apifacebook-javascript-sdkfb.ui
49
我的问题是，通过share_open_graph方法获取FB.ui，创建一个定制的分享对话框，其中包含不同的标题、描述和图片，根据用户在页面上的操作而不同。我的目标是，在测验结果显示时，它还应该有Facebook和Twitter共享按钮，这些按钮已经被自定义为包括适合于用户的测验结果的图片、标题和描述。 Twitter按钮很容易动态完成。我只需使用jQuery创建一个Twitter按钮，使用与任何地方相同的HTML，将我的动态描述作为data-text属性提供，然后调用twttr.widgets.load();来激活按钮。而Facebook分享按钮则存在问题，我尝试了许多方法但都无效。最终我选择了在弹出窗口中使用普通的分享对话框，虽然不理想但至少稳定可靠。我使用了https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2，通过URL查询提供动态详细信息，比我最初在Buzzfeed上查看的sharer.php用法更加现代化。
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对话框呈现

基本工作正常-图片、标题和描述都与测验结果一致(在这种情况下是"法国")-但Feed对话框不仅已过时，而且也远不如分享对话框（见下文）。我想做得更好。

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

截图显示正确的现代共享对话框，但具有通用OG标签而不是我的自定义详细信息

与已弃用的Feed对话框相比，在设计和功能方面，Share对话框当前正在使用。但在这种基本用法中，它就像一个常规的共享按钮一样，尽管我试图提供额外的信息，但只使用了网址，并且页面上的通用Open Graph标签提供了内容。

第三次尝试：FB.ui({ method: "share_open_graph" })

这似乎是我必须使用的那个。我只需要找出如何使用！ * 我添加了："quiz"作为对象类型到我的应用程序中（名称：matchadviceuk）。 * 我添加了："Share a quiz"作为基于"quiz"选项和现有"Share"操作类型的故事类型到我的应用程序中。 * 我已经添加了：适当的Open Graph prefix="" 内容到我的 <head>声明中。

按钮上的点击函数现在看起来像：

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

单击后会生成以下内容：

screenshot showing error box saying "The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: quiz."

所以我将上述代码中的url更改为quiz，结果出现：

screenshot showing error box saying "Object at URL <url> has og:type of 'article'. The property 'quiz' requires an object of og:type 'matchadviceuk:quiz'"

这已经开始有点明白了-页面本身是一篇文章，不可能改变。因此，也许我根本不想使用这个新的“测验”对象类型。但是如果我回到上面的代码块，并仅将type更改为matchadviceuk:article，我们会收到关于“quiz”未定义的相同错误-此时就完全没有任何意义了，因为“quiz”对象类型现在已经不在代码中提到了！（Facebook缓存的受害者，这是额外的麻烦。）

这就是我陷入的困境，无法想出进一步的想法。我甚至尝试完全删除type和url属性，希望Facebook可以自己处理，但是不行。

我仍然不确定添加对象类型和故事类型到我的应用程序是否必要，但无论如何，我都无法让它起作用。请帮忙！

与之相比：

Buzzfeed经常做这种类型的测验，他们实际上使用了Facebook的sharer.php链接来进行补丁式工作，并将动态内容作为URL查询字符串的一部分提供，并手动强制它在新窗口中打开。这很丑陋，不“官方”，不太友好，我敢说在移动和平板浏览上可能会出现问题。由于所有这些原因，我更喜欢用FB.ui来做得体-不仅如此，而且sharer.php处于“它是否过时？”的不断变化中，甚至官方的FB开发人员线（由于没有声誉而无法添加链接）-表示它不会再像以前那样工作。

调研：

我做了大量的谷歌搜索和Stack Overflow搜索。没有什么与我的问题完全匹配（这让我感到惊讶，但我确实有额外的限制，例如需要在没有单独的PHP注入结果页面的情况下进行所有这些处理）。这个问题是“share_open_graph”的SO上唯一的结果，并使用FB.api创建对象，然后使用FB.ui发布-听起来不错，但事实是这会产生多篇帖子发布到用户的动态中，这将导致被Facebook封禁。这位用户能够依靠PHP，而我需要纯客户端交互性。

我也在尝试弄清楚这个问题。我只是刚刚找到了share_open_graph方法。你能解释一下你在哪里找到该方法的可用操作吗？FB帮助中心似乎非常缺乏相关信息。 - moosefetcher
嘿，moosefetcher。除了已经链接的分享对话框页面之外，到目前为止我发现的唯一有用的东西是OG操作页面。我越想越觉得这将需要在Facebook上注册一个对象，例如在此处描述的，但我不知道是否应该为每个测验结果手动创建一个或每次动态创建这些对象。 - Matt Morrison
那就是我所达到的点。我没能搞清楚如何正确地设置对象。我确实注意到，在涉及我的自定义操作的可能“故事”列表中，使用 object.title 的那个看起来很有前途，因为它可以设置标题以包含我填写该空白处所需的文本，例如，可以将标题属性设置为包括得分。不过我不知道如何设置标题…… - moosefetcher
2
我也遇到了同样的问题。Facebook的文档混乱不堪，我找不到任何有用的信息。他们废弃了一个很好用的方法'feed'，并用另一个帮助和文档非常差的方法来替代它。 - Christian Dechery
看看我做的东西。我发送了URL、图像URL、描述和标题，我希望用户分享，并将这些参数放在用户分享的URL中。这个URL本身会将这些参数放在og meta标签中。不过，我的代码有一些问题。如果有人能帮忙，我们可以得到最新的解决方案。链接：http://stackoverflow.com/questions/28751908/facebook-share-button-using-dynamic-og-tags-for-a-quiz?noredirect=1#comment45786758_28751908 - Pavan Katepalli
5个回答
19

我已经使用像这样的对象完成了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.');
    }
});
如何在弹出窗口中打开它，而不是默认的iframe？ - Imran Qamer
1
正常工作，只有一个问题，它说：“Deepak Mahakale在APPNAME上分享了一个对象。” - Deepak Mahakale
1
这解决了我的问题，关于sharer.php在09/2017之后不再读取任何GET参数（除了共享的URL）的问题。 - needfulthing
"share_open_graph" 方法已被弃用...不幸的是，Facebook文档没有明确说明此方法不再支持，但在文档中并未提及“share_open_graph”方法，也无法正常工作。 - Hooman Bahreini
3

属性'quiz'需要一个' 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元标记，因为看起来action_properties中的标题、描述和图像参数实际上并不起作用，例如：

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

我遇到了类似的问题，你的详细问题帮助了我很多，让我想出了解决方案，感谢你的分享。

正如你所建议的，在FB的应用设置中创建自定义操作和与该操作相关的自定义对象。在你的情况下，操作是“分享”，对象是“测验”。你应该有一个故事，例如“约翰·多分享了一份测验通过某个超棒的应用程序”。

在你的JS代码中，你基本上告诉Facebook这个故事。

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

你已经告诉Facebook，你的故事拥有“quiz”对象，并具有“分享”操作。因此，首先要告诉它这个“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.
  })
});

现在，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 -->
        ...

现在，FB将该URL上的HTML（或PHP）页面识别为“quiz”对象。
在我的情况下，我还需要将一些变量传递给共享对话框。因此，我使用了一个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; ?>" >
        ...

希望这能有所帮助。 干杯！
谢谢Doruk，这对我很有帮助。我要注意一下，我不需要<meta property="og:type" content="myCustomObject">元标签。这可能是因为我在该页面上只使用了一个对象，但只是提供信息。 - Nick M
1

该对象必须是一个对象

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

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

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

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

对我来说，这个问题是它在没有像传统共享按钮那样首先提示他们弹出窗口的情况下发布。

1
嗨，你能分享一下你的代码吗？我也遇到了同样的问题！ - Manuel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接