Search code examples
javascripthtmlfacebookfacebook-graph-apifacebook-timeline

Facebook API - posting to a timeline

I know this can't be that difficult; maybe I'm going about this the wrong way. Hopefully you can help me.

I have a website that needs to be able to post a string to someone's Facebook timeline.

I've gotten them to login properly, but I haven't found any working code to submit information to their timeline after they've given permission.

I've followed the example here with no luck. I've

  • Created an App
  • Logged into Facebook
  • Defined a Cook action with a recipe object
  • Created a page on my website with the code that they provided, replacing [your_app_id] with my app id
  • Attempted to post a cook action

But when I click the cook button on their sample page on my site, it gives me the error:

No callback passed to the ApiClient for https://graph.facebook.com/me/fblaevents:cook

and the error occurred browser alert pops up.

Here is the sample code that I'm using:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head prefix="og: http://ogp.me/ns# fblaevents: 
              http://ogp.me/ns/apps/fblaevents#">
  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="542182755801091" /> 
  <meta property="og:type" content="fblaevents:recipe" /> 
  <meta property="og:title" content="Stuffed Cookies" /> 
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> 
  <meta property="og:description" content="The Turducken of Cookies" /> 
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

  <script type="text/javascript">
  function postCook()
  {
      FB.api(
        '/me/fblaevents:cook',
        'post',
        { recipe: 'http://fbwerks.com:8000/zhen/cookie.html' },
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Cook was successful! Action ID: ' + response.id);
           }
       });
  }
  </script>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '542182755801091', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });
    };

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

  <h3>Stuffed Cookies</h3>
  <p>
    <img title="Stuffed Cookies" 
         src="http://fbwerks.com:8000/zhen/cookie.jpg" 
         width="550"/>
  </p>

  <br>
  <form>
    <input type="button" value="Cook" onclick="postCook()" />
  </form>
</body>
</html>

If there is an easier way, please point it out to me. I don't know what I'm doing.

Solution

  • You should replace the OG meta tags and the recipe url in your JS code with your own. As the above code is a starting code only, not a working demo (or maybe it was but now the links are dead).

    Also since you are getting Error occured then most probably response.error has something in it, so you should check its value by calling the console method for example: 

    if (!response || response.error) {
   console.log('Error occured: ', response.error);
} else {

    This would give you:

    Error occured: Object {type: "Exception", message: "Could not retrieve data from URL.", code: 1660002}