在Facebook上分享测验结果

Question

我花了数小时进行研究，但似乎许多开发人员都觉得这很棘手。我有一个小的PHP测验，以以下方式从表单输出结果：

if (maxA) {
   echo '
   <img src="imgs/result4.jpg"/>
   <div class="results2">
   <p class="title">You are a Bean</p>
   <p class="details">Description</p>
   </div>';
}

问题是如何在底部添加一个“分享”按钮，它将在Facebook上分享结果，包括描述和图片。请注意，有四个可用的结果。

我制作了一个公共应用程序，并在头部插入了以下内容：

<script>
window.fbAsyncInit = function() {
FB.init({
  appId      : '1382290368762081',
  xfbml      : true,
  version    : 'v2.3'
});
};

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

HTML还没有弄清楚。我曾反复考虑过这个答案：Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results，但实际上并没有实现任何东西。如果有人知道确切的方法，并与我们分享，那对整个社区都会有帮助。

- tanya

---

如果您有四个不同的结果，则应创建四个单独的URL，每个URL都包含一个结果的Open Graph元数据，并让用户分享与其结果匹配的URL。 - CBroe

@Chuck：是的，如果您将相同的值放入og:url元标记中，它们会显示。 - CBroe

@CBroe，提醒一下，您关于不同URL的说法是错误的。您可以使用我在下面帖子中描述的Feed方法来实现这一点。 - Chuck Le Butt

我并没有说你必须使用不同的URL，但这是更好的选择。据我所知，通过Feed对话框发布的内容再次被分享时将再次使用来自URL的OG元数据，因此当用户重新分享使用Feed对话框发布的帖子时，您的自定义值可能会“丢失”。因此，在我看来，个别URL是更好的选择。 - CBroe

如果用户分享了您的小测验结果，则应显示默认值，即小测验的呼吁行动，而不是其他人的结果。因此最好使用Feed UI。 - Chuck Le Butt

Answer 1

您可以使用 Facebook JS SDK 来实现这一点。您可以调用 FB.ui 方法来发布动态。 在您的页面上创建一个按钮。

<input type="button" onclick="postToFeed()" value="Share" />

使用下面的 JavaScript 函数在 Facebook 上分享。

function postToFeed() {
    // calling the API ...
    var obj = {
      method: 'feed',
      link: 'https://www.azeezkallayi.com/',
      description: "description goes here",
      picture: 'https://www.azeezkallayi.com/demo/test/womens-day.jpg',
      name: 'International womens day'       
    };
     FB.ui(obj);
   }

在这里，您可以随意更改参数的值。

- Azeez Kallayi

Answer 2

针对@Azeez的回答：尽管@CBroe有评论，但为每个不同结果创建四个URL是不必要的。处理这种情况的最佳方法是使用Feed dialog进行Facebook分享（类似于但不同于Share对话框--Share方法无法修改，而是从页面上的元标记中提取信息）。

然后，您可以使用JavaScript SDK（带有您的应用程序ID）打开一个新的Feed对话框，其中填充了完全独特的项目。例如：

    // Facebook Share
    $('#facebook-share').on('click', function(e){
        e.preventDefault();

        FB.ui({
            method: 'feed',
            link: 'http://www.example.com/Quiz/',
            picture: '<?= $FacebookShareImage; ?>',
            name: 'This is a headline',
            caption: 'example.com',
            description: 'Your longer description goes here'

        }, function(response){
            if (response) {
                console.log('Facebook post published.');
                showThankYou();
            } else {
                console.log('Facebook post was not published.');
            }
        });
    }); 

您可以阅读上述Feed对话框文档页面中提供的其他可用属性。

- Chuck Le Butt