Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results

Summary: My problem is getting FB.ui, via the share_open_graph method, to create a customised share dialog that contains different title, description, and picture, based on the user's actions on the page.

The question was my first and I had no reputation, so numerous links were removed, but (thanks to everyone who gave me upvotes) I have been able to rescue the screenshots that were originally missing.

EDIT: I ended up having to just use a regular popup window with a share dialog in it, it's not ideal but at least it works reliably. The more I looked around the web the more I found that many high profile respectable sites were still using popup sharing like this, so I figured in this case the advantages of using a legacy solution outweighed the extensive work in finding a proper solution, I used https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 with dynamic details supplied via URL query which is at least slightly more up-to-date than the sharer.php usage I was originally looking at on Buzzfeed.

My page:

I have a quiz. Ten questions, five answers to each, a result is produced assigning one of five options as the "result". Everything as far as the quiz works great. The result is pulled in when quiz is completed via Ajax/jQuery - this is so that in the future I will be able to build a PHP-based front-end for other people to manage the creation of quizzes. Whilst I happily provide the page URL in the code below, but sorry - until I fix this issue I can't publish it publicly, so you can't access it!

My aim:

When the result of the quiz is shown, it should also have Facebook and Twitter share buttons which have been customised to include a picture, title, and description that is appropriate to the user's quiz result.

Twitter button was easy to do dynamically

I just use jQuery to create a Twitter button using the same HTML as one would anywhere, with my dynamic description supplied as the data-text property, and then call twttr.widgets.load(); to activate the button.

The Facebook Share button is the problem

• I can't add a "normal" share button - it only takes one property, the URL (doesn't change per quiz result).
• I can't change the generic Open Graph tags that exist on the page either - although jQuery can do this, Facebook's caching means it is pointless. Plus the generic sharing buttons (FB/Twitter/G+) on every page should remain unaffected and always share the default OG tags.

So what I am doing is creating a link and appending it to the page with jQuery, and then setting the click trigger action with jQuery too. App ID is already successfully set with the FB.init() block of code. These are the methods I have tried for the click trigger:

Attempt 1: FB.ui({ method: "feed" })

FB.ui({
  method: 'feed',
  name: "I got "+response.country+"! Which European are you destined to date?",
  link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  picture: response.image,
  description: response.body
});

The basics work - picture, title and description are all in line with the quiz result (in this case "French") - BUT the Feed dialog is not only deprecated but also hugely inferior to the Share dialog (see below). I'd like to do this properly.

Attempt 2: FB.ui({ method: "share" })

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

The Share dialog is current, and you can see the improvements in design and functionality compared to the deprecated Feed dialog. But in this basic usage it is just like a regular share button, and despite my attempts to provide extra information only the URL is used and the generic Open Graph tags from the page provide the content.

Attempt 3: FB.ui({ method: "share_open_graph" })

This seems to be the one I must use. I just need to work out how! * I've added: "quiz" as an object type to my app (name: matchadviceuk). * I've added: "Share a quiz" as a story type to my app based on the "quiz" option and the existing "Share" action type. * I've added: the appropriate Open Graph prefix="" content to my <head> declaration

The click function on the button now looks like:

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

Upon click this produces:

So I changed url in the above code to quiz and I get:

This is starting to make sense - the page itself IS an article, and no that can't change. So maybe I don't want to use this new "quiz" object type at all. But if I go back to the block above and just change type to matchadviceuk:article, we get the same error about "quiz" not being defined - at this point this makes zero sense whatsoever as the "quiz" object type is now not mentioned anywhere in the code! (Possible victim of Facebook caching, which is an added complication.)

And here is where I am stuck beyond any further idea. I've even tried removing type and url attributes entirely, hoping Facebook could do its own thing, but no.

I'm not still convinced that my efforts to add object type and story type to my app were even necessary, but either way, I just cannot get this working. Please help!

Compare to:

It's Buzzfeed who do these type of quizzes a lot, and they actually do a bodge job of using a Facebook sharer.php link with the dynamic content supplied as part of the URL query string, and forcing it to open in a new window manually. It's ugly, not "official", not as user friendly, and I dare say possibly presents problems on mobile and tablet browsing. For all these reasons, I'd much prefer to do it properly with FB.ui - not only that but sharer.php is in a constant flux of "is it or isn't it deprecated?" and even the official FB developer line (can't add link due to no reputation) - is that it won't work like this for long.

Research:

I've done tons of Googling and Stack Overflow searching. Nothing quite matches my issue (which surprises me but I do have extra limitations like needing to do all this processing dynamically without separate PHP-infused results pages). This question is the only result on SO for "share_open_graph" and creates an object with FB.api and then publishes with FB.ui - sounds good apart from the fact this produces multiple posts to the user's feed, which would result in a ban from Facebook. This user was able to rely on PHP where I need pure client-side interactivity.

Solution 1:

I have done with share_open_graph method with object like this,,

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

Solution 2:

The property 'quiz' requires an object of og:type 'matchadviceuk:quiz'." This is starting to make sense - the page itself IS an article

You were right here. After that I went to page template which referenced in 'url' parameter of 'action_properties' and added

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

In your case it would be

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

That's all, sharing through FB.ui works

Of course your developing server should have external http address (I use http://ngrok.com for such things)

Edit: anyway you should add extra parameter to the url according to which populate specific data in og:title, og:description, og:image meta tags on the page because it doesn't seem that title, description and image parameters in action_properties actually work, e.g.

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