Jquery 使用；共享“开放”图形；FacebookUI为测验结果创建动态共享对话框_Jquery_Facebook_Facebook Graph Api_Facebook Javascript Sdk_Fb.ui

Jquery 使用；共享“开放”图形；FacebookUI为测验结果创建动态共享对话框

jquery facebook facebook-graph-api

Jquery 使用；共享“开放”图形；FacebookUI为测验结果创建动态共享对话框,jquery,facebook,facebook-graph-api,facebook-javascript-sdk,fb.ui,Jquery,Facebook,Facebook Graph Api,Facebook Javascript Sdk,Fb.ui,摘要：我的问题是，通过共享\u打开\u图形方法，根据用户在页面上的操作，创建包含不同标题、描述和图片的自定义共享对话框这个问题是我的第一个问题，我没有名声，所以很多链接都被删除了，但是（感谢所有给我投票的人），我已经能够拯救那些原本丢失的截图编辑：我最后不得不使用一个带有共享对话框的常规弹出窗口，这并不理想，但至少它工作可靠。我越是浏览网页，就越发现许多知名度较高的网站仍在使用这种弹出式共享，因此我认为在这种情况下，使用传统解决方案的优势超过了寻找合适解决方案的大量工作，我使用了通过URL

摘要：我的问题是，通过共享\u打开\u图形方法，根据用户在页面上的操作，创建包含不同标题、描述和图片的自定义共享对话框

这个问题是我的第一个问题，我没有名声，所以很多链接都被删除了，但是（感谢所有给我投票的人），我已经能够拯救那些原本丢失的截图

编辑：我最后不得不使用一个带有共享对话框的常规弹出窗口，这并不理想，但至少它工作可靠。我越是浏览网页，就越发现许多知名度较高的网站仍在使用这种弹出式共享，因此我认为在这种情况下，使用传统解决方案的优势超过了寻找合适解决方案的大量工作，我使用了通过URL查询提供的动态详细信息，这至少比我最初在Buzzfeed上看到的sharer.php用法要更新一些

我的页面：我有一个测验。十个问题，每个问题五个答案，生成一个结果，指定五个选项中的一个作为“结果”。就测验而言，一切都很好。当测验通过Ajax/jQuery完成时，结果就会显示出来——这是为了将来我能够为其他人构建一个基于PHP的前端来管理测验的创建。虽然我很乐意在下面的代码中提供页面URL，但很抱歉-在我解决此问题之前，我无法公开发布，因此您无法访问它

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

Twitter按钮很容易动态执行我只是使用jQuery创建一个Twitter按钮，它使用与任何地方相同的HTML，动态描述作为

数据文本

属性提供，然后调用

twttr.widgets.load（）以激活该按钮
Facebook共享按钮是个问题

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

因此，我要做的是创建一个链接并使用jQuery将其附加到页面，然后使用jQuery设置click trigger操作。已使用FB.init（）代码块成功设置应用程序ID。以下是我尝试过的单击触发器方法：
尝试1:FB.ui（{method:“feed”}）

基本工作-图片、标题和描述都与测验结果一致（在本例中为“法语”）-但是提要对话框不仅不受欢迎，而且大大低于共享对话框（见下文）。我想把这件事做好
尝试2:FB.ui（{method:“share”}）

是最新的，与不推荐使用的提要对话框相比，您可以看到在设计和功能方面的改进。但在这种基本用法中，它就像一个普通的共享按钮，尽管我试图提供额外的信息，但只使用URL，页面中的通用打开图标记提供内容
尝试3:FB.ui（{method:“share\u open\u graph”}）
这似乎是我必须使用的。我只需要想办法！
*我已经在我的应用程序（名称：matchadviceuk）中添加了“测验”作为对象类型。
*我已经根据“测验”选项和现有的“分享”动作类型，将“分享测验”作为故事类型添加到我的应用程序中。
*我已经在我的
声明中添加了：适当的opengraphprefix=”“
内容
按钮上的单击功能现在如下所示：
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
更改为quick
，我得到：
具有og:类型的“文章”。属性“quick”需要og:type“matchadviceuk:quick”的对象“>
这开始有意义了——页面本身就是一篇文章，不，这是不能改变的。所以我可能根本不想使用这种新的“测验”对象类型。但是如果我回到上面的代码块，将类型更改为matchadviceuk:article
，我们会得到关于未定义“测验”的相同错误-在这一点上，这毫无意义，因为“测验”对象类型现在在代码中的任何地方都没有提到！（可能是Facebook缓存的受害者，这增加了复杂性。）
这就是我无法理解的地方。我甚至尝试过完全删除type
和url
属性，希望Facebook能做自己的事情，但没有
我仍然不相信我在应用程序中添加对象类型和故事类型的努力是必要的，但无论如何，我都无法让它正常工作。请帮忙
与之相比：
Buzzfeed经常做这些类型的测试，他们实际上做了一件很糟糕的工作，使用Facebook sharer.php链接，动态内容作为URL查询字符串的一部分提供，并强制它在新窗口中手动打开。它很难看，不是“官方的”，没有用户友好性，而且我敢说可能会在移动和平板电脑浏览上出现问题。出于所有这些原因，我更愿意使用FB.ui来正确地实现它——不仅如此，sharer.php也一直处于“它是否已被弃用？”的状态，甚至官方的FB开发者行（由于没有声誉而无法添加链接）也认为它不会长时间像这样工作
研究：
我做了大量的谷歌搜索和堆栈溢出搜索。没有什么能完全符合我的问题（这令人惊讶
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
});

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

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

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

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

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

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

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

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