Facebook Recipe Box Open Graph Tutorial

StackOverflow https://stackoverflow.com/questions/11037307

  •  14-06-2021
  •  | 
  •  

Question

I am beginning Facebook App development and am following the Recipe Box App Tutorial on Facebook.

https://developers.facebook.com/docs/opengraph/tutorial/

I am stuck under the heading "Publish an Action" where it says "Now click the cook button!" On my site, I click it and shortly after I get an error message that says "Error occurred". I followed the steps I was given, except for the part where it says to click the "'Get Code' link next to your action. This contains curl code snippets that you can copy into terminal and run directly." I didn't know what to do with the curl code...the tutorial never really said to do anything with it.

Below is the code I'm using right now. I have a recipe.html file and an objectpage.html, which is where I click the cook button and get the error. Thanks in advance for any help you can give me!

recipe.html:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
      xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head>
  <title>OG Tutorial App</title>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '266155930158877', // 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>

  <fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
  </fb:login-button>

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

objectpage.html

<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# rk_recipebox: 
                  http://ogp.me/ns/apps/rk_recipebox#">
  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="266155930158877" /> 
  <meta property="og:type" content="rk_recipebox: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/rk_recipebox: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      : '266155930158877', // 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>

Page is located here:

http://glutendatabase.com/objectpage.html

Was it helpful?

Solution

In your objectpage.html file replace the postCook() function with this one. This will at least tell you what your error is.

My guess is you're still trying to POST the example URL given, not they URL of your webpage (See line 6 below). If your server is LOCALHOST, that will also throw an error. You need to be on a named server.

function postCook()
{
  FB.api(
    '/me/rk_recipebox:cook',
    'post',
    { recipe: 'http://YOURSERVER/objectpage.html' },
    function(response) {
       if (!response) {
          alert('Error occurred : No Response');
       } else if (response.error) {
          alert('Error occurred : ' + response.error);
       } else {
          alert('Cook was successful! Action ID: ' + response.id);
       }
    });
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top