JSFiddle - React, Tailwind, and code Playground

by trefu

HTML

<div id='fb-root'></div>

<div id="download_box" style="display: none;">
    Download Box (whatever that means) goes here
</div>

JavaScript

window.fbAsyncInit = function() {
    FB.init({
      appId      : '437410746335629', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));




FB.init({appId: "437410746335629", status: true, cookie: true});

  function postToFeed() {

    // calling the API ...
    var obj = {
      method: 'feed',
      link: 'https://developers.facebook.com/docs/reference/dialogs/',
      picture: 'http://fbrell.com/f8.jpg',
      name: 'Facebook Dialogs',
      caption: 'Reference Documentation',
      description: 'Using Dialogs to interact with users.'
    };

  function callback(response) {
    if (response && response.post_id) {
        document.getElementById('download_box').style.display = 'block';
    } else {
        alert('You must share your post before you can download.');
    }
}

    FB.ui(obj, callback);
  }