1. 技术文章
  2. Using “share_open_graph” Facebook UI to create dynamic share dialog for quiz results

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

由 白昼怎懂夜的黑 提交于 2019-11-28 15:39:20

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,
    ...
Doruk Eker

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!

the object must be, well, an 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(){});

I have the exact same problem. Ended up having to use FB.api instead of FB.ui

There's an example here, where it's being used to post an og:likes action: https://developers.facebook.com/docs/opengraph/getting-started

You just have to customize the action and object to post your own custom story.

For me, the problem with this is that it posts without prompting them first with a popup window like how conventional share buttons work.

标签
jquery
facebook
facebook-graph-api
facebook-javascript-sdk
fb.ui
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!