Web Apps

You can use the Share Dialog to allow your app's Users to share Open Graph Stories from your app.

To implement the Share dialog for Open Graph Stories:

Configuring Your App

Use the App Dashboard to access your app's basic settings and locate the App Domains field. Add the domain of the app where you will be implementing the Share Dialog.

Open Graph Markup

Use Open Graph Markup to markup the page that you want your Users to share. Note the URL for this page, because you will need to add it to the Share Dialog code.

Share Dialog Code

The following sample dialog code can share an Open Graph Story to a Users timeline with the "likes" action in the Post.

Place the script in the app that you configured above. In the script, replace your-app-id with your app's App ID.

<script type="text/javascript">

// Initialize the Facebook JS SDK.
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });

    // Put additional init code here
  };

  // Load the Facebook JS SDK Asynchronously
  (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 = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

    // Custom function to call when user initiates a share
    function ogShare() {
       FB.ui({
         method: 'share_open_graph',
         action_type: 'og.likes',
         action_properties: JSON.stringify({
             object:'https://developers.facebook.com/docs/opengraph/getting-started',
         })
    }, function(response){
         // Debug response (optional)
         console.log(response);
    });
  }

</script>

You can now hookup the ogShare() function to a button in your web app. When a User clicks the button, it will trigger the Share Dialog with a "likes" action in the headline.

Next Steps

Here are the next steps you can take in learning Open Graph: