Share quiz results on Facebook

Question

I have spent hours researching this but it seems to be tricky for many developers out there. I have a small php quiz, outputting results from a form in the following way:

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

The question is, how to add a Share button at the bottom of this, which will share the result on Facebook, together with the description and the picture. Note that there are four available results.

I have made a public app, and inserted the following in the head:

<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>

And the HTML is yet to be figured out. I went back and forth with this answer: Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results - but did not actually achieve anything.I think it would be helpful to the whole community, if someone knows the exact way to make this happen, and to share them with us.

If you have four different results, then you should create four individual URLs, each one holding the Open Graph meta data for one of the results, and let users share the one matching their result. — CBroe, Apr 01 '15 at 12:12
@CBroe Does Facebook consider URL attributes to be different pages? (Eg. www.mysite.com/quiz.php?result=22 being different from www.mysite.com/quiz.php?result=45 ?) — Chuck Le Butt, Oct 08 '15 at 16:42
@Chuck: Yes, they do – if you put that same value into the `og:url` meta tag. — CBroe, Oct 08 '15 at 16:43
@CBroe Just an FYI, but you're wrong about different URLs. You can do this using the Feed method described in my post below. — Chuck Le Butt, Oct 15 '15 at 15:55
I did not say you _have_ to use different URLs – but it is the better option. AFAIK re-shares of stuff posted via the Feed dialog will use the OG meta data from the URL again – so your custom values might get “lost” when a user re-shares the post made using the Feed dialog. And therefore, individual URLs, are the better option IMHO. — CBroe, Oct 15 '15 at 16:45
@CBroe If a user shares your quiz result, it *should* show the default values -- ie. A call to action for the quiz, and not the other person's results -- So it really is much better to use the Feed UI. — Chuck Le Butt, Oct 16 '15 at 11:04
If a friend of mine has posted their quiz result, with the title or description saying, _“I got 17 points on Foo-Bar-Quiz”_ – then I would expect it to show the same when I share _their_ result to say “well done” or to mock them about their low score ;-) – if it would just show a generic description then, that context would be lost … — CBroe, Oct 16 '15 at 11:25

score 10 · Accepted Answer · edited Oct 11 '16 at 15:46

You can use facebook js SDK for this. you can call FB.ui method feed to achieve this. Create a button on your page

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

.Use the below function javscript to share on 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);
   }

Here you can change the values of parameters as you want.

Chuck Le Butt · Answer 2 · 2015-10-16T11:02:20.547

Further to @Azeez's answer: Despite @CBroe's comment, it is unnecessary to create four URLs for each of the different results. The best way to handle this situation is to Facebook share using the Feed dialog (similar to, but not the same as, the Share dialog -- the Share method cannot be modified, and instead pulls its information from meta tags on the page).

You can then use the Javascript SDK (with your app ID) to open a new Feed dialog populated with completely unique items. For example:

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

You can read about the rest of the available attributes the aforementioned Feed dialog documentation page.

Share quiz results on Facebook

2 Answers2