Using the Facebook share_open_graph user interface to create a dynamic sharing dialog for test results

Question

Summary. . My problem is getting FB.ui using the share_open_graph method to create an individual sharing dialog containing various names, descriptions and images based on the user's actions on the page.

The question was my first, and I did not have a reputation, so numerous links were deleted, but (thanks to everyone who gave me the edge), I was able to save screenshots that were originally missing.

---

EDIT: I just had to use a regular popup with the share dialog, but it's not perfect, but at least it works reliably. The more I looked over the network, the more I found that many high-ranking respectable sites still use a pop-up message like this, so I decided that in this case the benefits of using an outdated solution outweigh the extensive work of finding the right solution, I used https: //developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 with dynamic details provided via a URL request which is at least a little more relevant than using sharer.php, I was originally looking at buzzfeed.

---

My page:

I have a survey. Ten questions, five answers each, the result is the assignment of one of the five options as a "result". Everything about the quiz works great. The result is pulled in when the survey completes through Ajax / jQuery - so that in the future I will be able to build a PHP-based interface for other people to manage the creation of quizzes. So far, I have happily provided the URL of the page in the code below, but unfortunately, until I fix this problem, I cannot publish it publicly, so you cannot access it!

My goal:

When the result of the quiz is shown, it should also have the Facebook and Twitter sharing buttons that were configured to include the image, title and description that match the results of the user quiz.

Twitter button was easy to make dynamically

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

Facebook share button is a problem

• I can’t add a “regular” sharing button - this requires only one property, a URL (it does not change as a result of the test).
• I can’t change the common Open Graph tags that exist on the page, although jQuery can do this, caching Facebook means this is pointless. In addition, the shared sharing buttons (FB / Twitter / G +) on each page should remain unchanged and always use the default OG tags.

So, I create a link and add it to the page using jQuery, and then set the click trigger action using jQuery. The application ID has already been set successfully with the code block FB.init (). These are the methods that I tried to use 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 of the work - the image, title and description correspond to the result of the quiz (in this case, “French”) - BUT the feed dialog is not only outdated, but also significantly inferior to Share (see below). I would like to do it right.

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 box displays the current value, and you can see improvements in design and functionality compared to the legacy channel dialog. But in this basic use, it looks like a regular sharing button, and despite my attempts to provide additional information, only the URL is used, and the general Open Graph tags on the page provide the content.

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

This seems to be the one I should use. I just need to figure out how! * I added: "quiz" as the type of object for my application (name: matchadviceuk). * I added: “Share quiz” as the story type for my application based on the “quiz” option and the existing “Share” action type. * I added: relevant Open Graph prefix="" content in my <head> ad

Now the click function on the button looks like this:

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

After clicking on the button appears:

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

It starts to make sense - the page itself is an article, and this cannot change. Therefore, perhaps I do not want to use this new type of quiz object at all. But if I go back to the block above and just change type to matchadviceuk:article , we get the same error as the "poll" that is not defined - at the moment this makes zero sense, since the type of the "quiz" object is now not mentioned anywhere in code! (A possible victim of Facebook caching, which is an additional complication.)

And here I am stuck outside of any additional idea. I even tried to completely remove the type and url attributes, hoping Facebook could do the trick, but no.

I'm not sure yet that my efforts to add an object type and a story type to my application were necessary, but in any case, I just can't get it to work. Please, help!

Compare with:

It Buzzfeed, which does such quizzes a lot, and they actually do the job using the sharer.php link on Facebook with dynamic content delivered as part of the URL query string, and forcing it to open in a new window manually. This is ugly, not "official", and not as user friendly, and I dare say, maybe these are problems with a mobile phone and tablets. For all these reasons, I would prefer to do it right with FB.ui - and not only that, but sharer.php is in a constant stream of "is it or is it not outdated?" and even the official line of FB developers (cannot add a link due to lack of reputation) is that it will not work for so long.

Research:

I followed the tone of Googling and Stack Overflow search. Nothing matches my problem (which surprises me, but I have additional limitations, such as the need to perform all this processing dynamically without separate pages with PHP results). This question is the only result for SO for "share_open_graph" and creates an object with FB.api and then publishes with FB.ui - it sounds good, except that it produces several posts in the user's feed, which will lead to a ban on Facebook. This user was able to rely on PHP, where I need pure client-side interactivity.

Answer 1

I did with the share_open_graph method with such an object,

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

Answer 2

The og: type "matchadviceuk: quiz" object is required for the quiz property. "It starts to make sense - the page itself is an article

Were you here. After that, I went to the page template referenced by the 'url' parameter in the action_properties file and added

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

In your case it will be

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

That is all, sharing through FB.ui works

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

Edit: In any case, you should add an additional parameter to the URL, according to which certain data is filled in og: title, og: description, og: image meta tags on the page, because it does not look like the names, descriptions and image parameters in action_properties really work for example

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

Answer 3

I had a similar problem and your detailed question helped me find a solution, thanks for being there.

As you propose to create a custom action and a custom object associated with the action in the application settings in FB. In your case, the action is "share" and the object is "quiz". And you should have a story like "John Doe shared a quiz through Some-awesome-app."

In your JS code, you basically tell 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 a quiz object with a share action. So, first you will tell where this quiz object is located.

 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. The next step is to have a quiz object in this place. You can create an HTML or PHP page at this URL. This is a regular HTML page with some additional meta tags. These meta tags make your page recognize the quiz object. The following is an example of 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 this URL is recognized by the FB as a 'quiz' object.

In my case, I needed to pass some variables to share the dialog. Therefore, I used the PHP page as an object. From JS, I make a call with inline query and read the GET parameters in my PHP. therefore, JS becomes the following:

 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 the 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; ?>" > ... 

Hope this helps. Hurrah!

Answer 4

I have the same problem. Finished using FB.api instead of FB.ui

Here is an example where it is used to publish an og: likes action: https://developers.facebook.com/docs/opengraph/getting-started

You just need to set up an action and an object to publish your own story.

For me, the problem is that it posts messages without a prior request with a pop-up window, for example, how regular common buttons work.

Answer 5

the object must be, well, the object

 FB.ui({ method: 'share_open_graph', action_type: 'matchadviceuk:share', action_properties: JSON.stringify({ 'quiz': { 'og:type': 'matchadviceuk:quiz', 'og:url': "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date", 'og:title': "I got "+response.country+"! Which European are you destined to date?", 'og:description': response.body, 'og:image': response.image } }) }, function(){});