个人中心
gpt4 book ai didi

jquery - 使用 "share_open_graph"Facebook UI 为测验结果创建动态共享对话框

转载 作者：行者123 更新时间：2023-11-30 05:13:45 32 4
gpt4 key购买 nike

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

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

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

我的页面:

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

我的目标:

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

Twitter按钮很容易动态地做

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

Facebook 分享按钮是问题所在

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

    • 所以我正在做的是创建一个链接并使用 jQuery 将其附加到页面，然后也使用 jQuery 设置点击触发操作。已使用 FB.init() 代码块成功设置了 App 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

    基础工作——图片、标题和描述都与测验结果一致(本例为“法语”)- 但是 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" })
    这似乎是我必须使用的。我只需要弄清楚如何!
    * 我已添加:“测验”作为我的应用程序的对象类型(名称:matchadviceuk)。
    * 我已根据“测验”选项和现有的“分享”操作类型将“分享测验”作为故事类型添加到我的应用程序中。
    * 我添加了:适当的开放图 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 ，我们得到了关于未定义“测验”的相同错误 - 在这一点上，这是零意义的，因为现在代码中的任何地方都没有提到“测验”对象类型! (Facebook 缓存的可能受害者，这是一个额外的复杂性。)

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

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

    相比于:

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

    研究:

    我已经完成了大量的谷歌搜索和堆栈溢出搜索。没有什么完全符合我的问题(这让我感到惊讶，但我确实有额外的限制，比如需要在没有单独的 PHP 注入(inject)的结果页面的情况下动态地进行所有这些处理)。 This question是 SO 上“share_open_graph”的唯一结果，并使用 FB.api 创建一个对象，然后使用 FB.ui 发布 - 听起来不错，除了这会向用户的提要生成多个帖子，这会导致 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 为测验结果创建动态共享对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23514157/

    32 4 0
    文章推荐： c++ - 多线程和模板化单例竞争条件
    文章推荐： c++ - std::vector 线程对我来说是安全的吗？
    文章推荐： c++ - 使 C++ 插件异步
    文章推荐： C++ SDL2 如何为单个图 block 着色
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com