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

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

问题是我的第一个，我没有声誉，所以许多链接被删除，但(感谢大家谁给我upvote)我已经能够救出原来丢失的截图。

编辑：我最终不得不使用一个常规的弹出窗口与共享对话框，它不是理想的，但至少它的工作可靠。我在网上查看的越多，我发现许多高调尊敬的网站仍然使用弹出共享这样，所以我认为在这种情况下使用传统解决方案的优势胜过寻找一个正确的解决方案的广泛工作，我使用https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2，通过URL查询提供的动态详细信息至少比我最初在BuzzFeed上查看的sharer.PHP使用情况稍微更新一些。

我的页面：

我有一个测验。十个问题，每个答案五个，产生一个结果，将五个选项之一分配为“结果”。一切尽可能的测验工作伟大。当通过Ajax / jQuery完成测试时，结果被拉入 – 这是为了在将来我将能够构建一个基于PHP的前端，为其他人管理测验的创建。
虽然我很乐意在下面的代码中提供页面网址，但很抱歉，直到我解决这个问题，我不能公开发布，所以你不能访问它！

我的目标：

当显示测验的结果时，它还应具有Facebook和Twitter共享按钮，其被定制以包括适合于用户的测验结果的图片，标题和描述。

Twitter按钮很容易做动态

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

Facebook Share按钮是问题

>我无法添加“正常”共享按钮 – 它只需要一个属性，该URL(不会更改每个测验结果)。
>我不能改变页面上存在的通用打开图标签 – 虽然jQuery可以做到这一点，Facebook的缓存意味着它是无意义的。此外，每个页面上的通用共享按钮(FB / Twitter / G)应保持不受影响，并始终共享默认的OG标签。

所以我正在做的是创建一个链接，并附加到页面与jQuery，然后设置与jQuery的点击触发动作。已使用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
});

基本工作 – 图片，标题和描述都与测验结果(在这种情况下为“法语”)一致 – 但Feed对话框不仅被弃用，而且还远远不及Share对话框(见下文)。我想这样做正确。

尝试2：FB.ui({method：“share”})

FB.ui({
  method: 'share',href: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",description: response.body
});

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

尝试3：FB.ui({method：“share_open_graph”})

这似乎是我必须使用的。我只需要工作出来怎么样！
*我添加了：“测验”作为对象类型到我的应用程序(名称：matchadviceuk)。
*根据“测验”选项和现有的“共享”操作类型，我已将“分享测验”作为故事类型添加到我的应用程序中。
*我添加了：适当的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
  })
});

点击这产生：

所以我改变url在上面的代码测验，我得到：

这是开始有意义 – 页面本身是一篇文章，没有那不能改变。所以也许我不想使用这个新的“测验”对象类型。但是，如果我回到上面的块，只是改变类型为matchadviceuk：文章，我们得到相同的错误“测验”没有被定义 – 在这一点这是零意义，无论如何，因为“测验”对象类型现在没有提到代码中的任何地方！ (Facebook缓存的可能受害者，这是一个额外的复杂性。)

这里是我超越任何进一步的想法。我甚至尝试完全删除类型和url属性，希望Facebook可以做自己的事情，但没有。

我还不相信我的努力添加对象类型和故事类型到我的应用程序甚至有必要，但无论如何，我只是不能得到这个工作。请帮忙！

相比于：

它是BuzzFeed谁做这些类型的测验很多，他们实际上做一个使用Facebook sharer.PHP 链接与作为URL查询字符串的一部分提供的动态内容，并强制它手动打开在新窗口中的bodge工作。这是丑陋，不是“官方”，不是用户友好，我敢说，可能会出现移动和平板电脑浏览的问题。由于所有这些原因，我更愿意使用FB.ui正确地做它 – 不仅如此，但sharer.PHP是一个不断变化的“是或者不是被弃用？甚至官方的FB开发者线(由于没有声誉，无法添加链接) – 是不会像这样长时间工作。

研究：

我做了大量的谷歌和堆栈溢出搜索。没有什么完全匹配我的问题(这让我感到惊讶，但我有额外的限制，如需要动态处理所有这些处理，没有单独的PHP注入的结果页面)。 This question是对“share_open_graph”的唯一的结果，并创建一个对象与FB.api然后发布与FB.ui – 听起来不错的事实，这产生多个帖子到用户的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.');
    }
});

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

解决方法

猜你在找的jQuery相关文章