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

时间：2014-05-07 09:39:42

标签： jquery facebook facebook-graph-api facebook-javascript-sdk fb.ui

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

问题是我的第一个，我没有声誉，所以删除了很多链接，但（感谢所有给我支持的人）我已经能够拯救最初缺失的截图。

编辑：我最后不得不使用常规弹出窗口，其中有一个共享对话框，它不太理想，但至少它可靠地工作。我越是环顾网络，越发现许多备受瞩目的网站仍然使用像这样的弹出式共享，所以我认为在这种情况下使用传统解决方案的优势超过了寻找合适解决方案的广泛工作，我用过https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2通过URL查询提供的动态详细信息，至少比我最初在Buzzfeed上查看的sharer.php用法略有更新。

我的页面：

我有一个测验。十个问题，每个问题五个答案，产生一个结果，将五个选项之一分配为＆＃34;结果＆＃34;。测验的一切都很棒。当通过Ajax / jQuery完成测验时，结果会被拉入 - 这样我将来可以为其他人构建一个基于PHP的前端来管理测验的创建。 虽然我很乐意在下面的代码中提供页面网址，但很抱歉 - 在我解决此问题之前，我无法公开发布，因此您无法访问它！

我的目标：

当显示测验结果时，它还应该有Facebook和Twitter共享按钮，这些按钮已经过定制，包括适合用户测验结果的图片，标题和描述。

Twitter按钮很容易动态

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

Facebook Share按钮是问题

  • 我无法添加＆＃34;普通＆＃34; 分享按钮 - 它只需要一个属性，即URL（每个测验结果不会更改）。< / LI>
  • 我无法更改页面上存在的通用Open Graph标记 - 虽然jQuery可以做到这一点，Facebook的缓存意味着它毫无意义。此外，每个页面上的通用共享按钮（FB / Twitter / G +）应保持不受影响，并始终共享默认的OG标签。

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

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

screenshot showing the correct details appearing but in an old-style half-working and deprecated Feed dialog

基础工作 - 图片，标题和说明都与测验结果一致（在本例中为＃34;法语＆＃34;） - 但 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
});

screenshot showing correct modern share dialog but with generic OG tags and not my custom details

Share dialog是最新的，与不推荐使用的Feed对话框相比，您可以看到设计和功能方面的改进。但在这个基本用法中，它就像一个普通的共享按钮，尽管我尝试提供额外的信息，但只使用了URL，页面中的通用Open Graph标签提供了内容。

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

这似乎是我必须使用的那个。我只需要弄清楚如何！ *我已添加：＆＃34;测验＆＃34;作为我的应用程序的对象类型（名称：matchadviceuk）。 *我已添加：＆＃34;分享测验＆＃34;作为我的应用程序的故事类型基于＆＃34;测验＆＃34;选项和现有的＆＃34;分享＆＃34;动作类型。 *我已添加：我的prefix=""声明中适当的Open Graph <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'"

这开始变得有意义了 - 页面本身就是一篇文章，而且不会发生变化。所以也许我不想使用这个新的＆＃34;测验＆＃34;对象类型。但是如果我回到上面的块并且只是将type更改为matchadviceuk:article，我们会得到与＃34;测验＆＃34;相同的错误。没有被定义 - 在这一点上，这没有任何意义，因为＆＃34;测验＆＃34;对象类型现在在代码中的任何地方都没有提到！ （可能是Facebook缓存的受害者，这是一个额外的复杂因素。）

这就是我被困在任何进一步的想法之外的地方。我甚至试图完全删除type和url属性，希望Facebook可以做自己的事情，但不是。

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

比较：

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

研究：

我已经完成了大量的Google搜索和Stack Overflow搜索。没有什么能与我的问题完全匹配（这让我感到惊讶，但我确实有额外的限制，比如需要动态地进行所有这些处理，而不需要单独的PHP注入结果页面）。 This question是＆＃34; share_open_graph＆＃34;的唯一结果。并使用FB.api创建一个对象，然后使用FB.ui发布 - 听起来不错，除了这会为用户的订阅源生成多个帖子，这将导致Facebook禁止。这个用户能够依赖PHP，我需要纯粹的客户端交互。

5 个答案:

答案 0 :(得分：18)

我使用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.');
    }
});

答案 1 :(得分：3)

  

属性'测验'需要一个og的对象：输入'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,
    ...

答案 2 :(得分：3)

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

建议您在FB中的应用设置中创建自定义操作和与操作相关的自定义对象。在你的情况下，行动是＆＃34;分享＆＃34;和对象是＆＃34;测验＆＃34;。你应该有一个故事，例如＆＃34; John Doe通过Some-awesome-app＆＃34;分享测验。

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

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

你已经告诉FB你的故事有＆＃39;测验＆＃39;对象，分享＆＃39;行动。所以首先你要告诉它这个问题的测验。对象是。

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知道这个＆＃39;测验＆＃39;对象是。下一步是进行一个测验＆＃39;该位置的物体。您可以在该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 -->
        ...

现在，该网址的HTML（或PHP）页面被识别为＆＃39;测验＆＃39; FB的对象。

在我的情况下，我还需要传递一些变量来共享对话框。因此我使用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; ?>" >
        ...

我希望这会有所帮助。 干杯！

答案 3 :(得分：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(){});

答案 4 :(得分：0)

我有完全相同的问题。结束了必须使用FB.api而不是FB.ui

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

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

对我来说，问题在于它会在没有提示的情况下首先发布弹出窗口，就像传统的共享按钮一样。

相关问题
最新问题