Facebook Javascript SDK: Publish actions with custom Open Graph objects

Question

I'm working on my Cordova application to get it more viral. Therefore I want to include Facebook and the Open Graph API to publish in the news stream of playing users, when they archive new things in the game. I'm completely new to the whole fb and open-graph thing, so please help getting started with it.

I login a new user by running the following code:

$(login).on("click", function() {
    FB.login(function() {
        console.log("Default Login succeded");
        console.log("Asking for write permissions");
        FB.login(function(rsp) {
            console.log("GOT WRITE PERMISSIONS");
            log(rsp);
        }, {
            scope : 'publish_stream'
        });
    }, {scope:"email"});

});

I registered a Open graph action called buy under the namespace einszwo. As object I use a default object.

It is not yet reviewed, but I'm using a developer facebook account to login on my device.

Now i want to call the action. To do that I use the following code:

    var obj = {
        title : "I visited Google",
        url : "http://www.google.com"
    };

    function callback(response) {
        console.log(JSON.stringify(response));
    }


    FB.api('me/einszwo:buy','POST',obj, callback);

Unfortunately the call fails with the following response from Facebook:

{"error":{"type":"Exception",
     "message":"The action you're trying to publish is invalid because it does not 
      specify any reference objects. At least one of the following properties 
      must be specified: object.","code":1611072}}

It would be really great if someone can help me with that problem or provide my some information where I can look for further information.

Thank you!

Sebastian

EDIT

The solution to just paste a url as the objects works, but we want to use Facebook hosted Objects which you define in the Facebook Object Browser. The approach is to be able to publish a activity of the user and if someone clicks on that activity we want them to be redirected to our application information page.

We cannot provide a page for every different object. Isn't there a possibility to use the Facebook Javascript SDK to use the predefined objects which are hosted on facebook?

I would really like to have a possibility like this to either create new objects

   var o = {
        "og:title" : "Test " + new Date(),
        "og:url" : "http://facebook.com/appcenter/**APPNAMESPACE**",
        "og:type" : "Object"

    }
    FB.api('/me/**APPNAMESPACE**:buy', 'POST', {
        object : o
    }, function(response) { console.log(JSON.stringify(response));});

this returns

{"message":"(#3503) \"{\"og:title\":\"Test Thu May 23 2013 12:19:45 GMT+0300 (EEST)\",\"og:url\":\"http://facebook.com/appcenter/einszwo\",\"og:type\":\"Object\"}\" is an invalid value for property \"object\" with type \"Reference\"","type":"OAuthException","code":3503}

or a way to use the ID of the predefined facebook objects like:

    FB.api('1234567890', 'POST', {
    }, function(response) { console.log(JSON.stringify(response));});

Can anyone help me?

Thanks!

Solution 1

It sounds like you are talking about an app owned object.

An app-owned object. These objects are used across your entire app. They are public, just like self-hosted objects. Anyone who uses your app can see them and they can be attached to any story your app creates.

You cannot use your appcenter url as an object (This really doesn't make sense if you think about what open graph URLs are meant for, and is pretty much a misuse of Open Graph)

You create an object in cURL or using the Object Browser

In my case I created a Leopluradon object for my coffeeshop type. Then I obtained the id (149831668534005) from the result of creation and used that in my call

FB.api(
'/me/philippeharewood:code',
'post',
{ coffeeshop: '149831668534005' },
function(response) {
   if (!response || response.error) {
      alert('Error occured');
      console.log(response.error);
   } else {
      alert('Publish was successful! Action ID: ' + response.id);
   }
});

A demo can be found at http://philippeharewood.com/facebook/charlie.html, it wouldn't work for you but you get the gist.

Then you can see it in your activity.

This is all explained in https://developers.facebook.com/docs/opengraph/using-object-api/

Solution 2

You should provide a link for open graph object, for example:

FB.api('/me/einszwo:buy','POST',{object:'http://example.com/product1'}, callback);

The linked object (http://example.com/product1) should have open graph tags:

<meta property="fb:app_id" content="133696533402323" /> 
<meta property="og:type"   content="object" /> 
<meta property="og:url"    content="Put your own URL to the object here" /> 
<meta property="og:title"  content="Sample Object" /> 
<meta property="og:image"  content="https://s static.ak.fbcdn.net/images/devsite/attachment_blank.png" />