Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results
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.'); }});
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, ...
I was having a similar issue and your detailed question helped me a lot to come up with a solution, thanks for putting out there.
As you suggest you create the custom action and the custom object related to the action in app settings in FB. In your case action is "share" and object is "quiz". And you should have a story such as "John Doe shared a quiz via Some-awesome-app".
In your JS code you are basically telling Facebook this story.
FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', // appNameSpace:myCustomAction action_properties: JSON.stringify({ // The action properties })});You already told FB that your story has the 'quiz' object, with the 'share' action. So first you tell it where this 'quiz' object is.
FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', // appNameSpace:myCustomAction action_properties: JSON.stringify({ quiz: 'http://example.com/quizItem' // customObjectProperties (found when editing your object in the fb dev portal, looks like `og:quiz`). Note: from what I can tell, every object with name `myObject` will have a `og:myObject` property. })});Now FB knows where this 'quiz' object is. Next step is to have a 'quiz' object at that location. You can create an HTML or PHP page at that URL. It is a normal HTML page with some additional meta tags. Those meta tags makes your page to be recognised as a 'quiz' object. Below is a sample HTML code and comments:
<html> <head> <meta property="og:type" content="quiz"> <!-- this tells that the page is a quiz --> <meta property="og:title" content="Some page title" > <!-- your page must have a title for sharing --> <!-- you can also use og:description and og:image if you want to change more but they are optional. Again you can find these when you edit your custom object --> ...Now the HTML (or PHP) page at that URL is recognised as a 'quiz' object by FB.
In my case I needed to pass some variables to share dialog as well. Therefore I used a PHP page as the object. From JS I make a call with an inline query and read that GET parameters in my PHP. so the JS becomes like:
FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', // appNameSpace:myCustomAction action_properties: JSON.stringify({ quiz: 'http://example.com/quizItem?country=<populated country name>' })});And PHP file is something like
<?php $country = $_GET['country'];?><html> <head> <meta property="og:type" content="quiz"> <meta property="og:title" content="Quiz from <?php echo $country; ?>" > ...I hope this helps.Cheers!