A simple way to share javascript quiz results on Facebook


Recently I wanted to make a "personalized" facebook sharer, so that people who used my quiz-like website could share their results on facebook with an automatic, personalised message (you know what I'm talking about: "what kind of rock are you? I got igneous!" -- that kind of thing).

I found a couple of links on Stack Overflow that were trying to help, but I couldn't make head or tails of the instructions, and they talked about various share-options that were deprecated (and so might eventually stop working). Facebook's own reference material was also hard (for me) to follow.

Eventually I figured out a way to do it that I haven't seen fully documented anywhere -- I can't promise you this is a "right" way to do it, but it works (for now) and it's (relatively) easy to implement. So here it goes.

1) Log onto Facebook and create an App

Instructions here: https://developers.facebook.com/apps/

The "Display Name" will show up in small grey writing on the facebook-sharer. You need to give a contact email in order for your app to work. You also need to click the "Add Platform" button to add your website's address (these are all under Settings > Basic).

2) Import FB.ui

Copy the following code immediately after the opening tag of your index.html (or whichever page of html your quiz is working on):

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR APP ID NUMBER GOES HERE',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

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

Remember to place your App ID number after "appId:"

3) Create a "share" button at the end of your quiz or app

This goes in index.html (or whatever html file) - can be something as simple as this:

<button id="shareBtn">Share On Facebook</button>

4) At the end of your javascript quiz, put the following code

Place this code at the end of your relevant javascript file (probably main.js, core.js or similar):

document.getElementById('shareBtn').onclick = function() {

    FB.ui({
        display: 'popup',
        method: 'share',
        title: 'I got ' + variable_name + '! How about you?',
        description: 'What kind of rock are you? Find out now!',
    link: 'THIS IS A LINK TO YOUR QUIZ'S PAGE ON YOUR WEBSITE',
    picture: 'THIS PICTURE WILL BE THE FACEBOOK SHARE IMAGE',
    href: 'THIS IS YOUR WEBSITE'S HOME ADDRESS',

  }, function(response){});

variable_name can be any javascript variable name that you've already set/used in your javascript quiz. So, for example, if your quiz determines what kind of rock the person is and stores the result as rockType then you could make the title of the facebook-sharer say "I'm a " + rockType. If your quiz gives people points and stores how many points they have as points_scored then you could make the description of the facebook-sharer say 'I scored ' + points_scored + ' points!'.

5) Check how it looks with Facebook Debugger

Go to https://developers.facebook.com/tools/debug/sharing and insert your page's address to see what the facebook sharing tool will look like. You should already have facebook open graph tags in the header of your index.html – if you haven't this will prompt you to fix that!

6) Make your app public

Go back to https://developers.facebook.com/apps/ and go to the "App Review" tab, then make your app live + available to the public. (As the app's author you will be able to use the app + share to your own facebook wall even while the app is private, but don't be fooled & publish prematurely -- no one else can use your facebooksharer until you make the app public!)

The Best from Uri Bram

Limited time only: Get a free copy of Write Harder + (very) occasional & thoroughly excellent emails.

Thinking Statistically in Chinese

Thinking Statistically 的中文版将于2016年底推出。如欲及时获取本书出版资讯,请在此输入您的电邮地址:

Start Thinking Statistically

Thinking Statistically Book Cover

"Thinking Statistically explains essential concepts in statistics with wit and flair. Instead of page after page of mathematical mumbo-jumbo, Uri Bram tells stories that clearly illustrate the core ideas."

Get Thinking Statistically at Amazon.com now!