在 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。请注意，有四个可用结果。

我做了一个public的app，在头部插入了以下内容：

<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 - 但实际上并没有实现 anything.I 认为这对整个社区都有帮助，如果有人知道实现这一目标的确切方法并分享它们和我们一起。

Answer 1

您可以为此使用 facebook js SDK。您可以调用 FB.ui 方法 feed 来实现此目的。在您的页面上创建一个按钮

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

。使用以下功能 javscript 在 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);
   }

在这里您可以根据需要更改参数值。

Answer 2

进一步@Azeez 的回答：尽管有@CBroe 的评论，但没有必要为每个不同的结果创建四个 URL。处理这种情况的最佳方法是使用 Feed dialog 进行 Facebook 分享（与“分享”对话框相似但不同——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 dialog documentation page 的其余可用属性。

在 Facebook 上分享测验结果

Share quiz results on Facebook

php

facebook

facebook-graph-api