Using Facebook’s Custom story and Open Graph story with iOS

With the increasing popularity of various social networking sites the important aspect that apps need to cover is that they must have the ability to connect to the user’s profile and post a status update using the app.

Sharing to Facebook from your iOS app can include a variety of operations like posting a link, sharing an update and posting a story. Now-a-days, you can see a lot of Facebook user’s updating their status that is structured in the form of a story, these posts allows you to tag your friends and check-in into places. This kind of post can be structured from your app as well. A story is more appealing in a way that, it is structured well than just posting a plain sentence status updates.

A Facebook story contains two major aspects

• A noun (Object)

• A verb (Action)

Configuring a story involves the integration of the noun and the verb meaningfully.

Facebook has provided some default objects and actions called common action, these actions are used in common stories. Common stories are nothing but actions that are applicable to a large chunk of population, they may be as simple as cooking a recipe or going for a walk.  You can find the list of common objects and actions at https://developers.facebook.com/docs/reference/opengraph.

If your story tells something other than the common stories, you need to customize using the custom stories. By using Custom stories the user is given more flexibility to create his story according to his needs. You can add your own action that may be specific to your app. As Facebook has recently launched the second version of the graph API there is not much online resource that can be found.

Open graph story Using the Facebook common objects and actions:

●     Ask for publish_actions permission to post anything to Facebook on behalf of the user.

This is demonstrated in the Facebook login given in the link below.

https://developers.facebook.com/docs/facebook-login/ios/v2.0

●  Creating an object: Create a mutable dictionary of FBGraphObjectForPost (because we post the object) and set the object properties by specifying the property as a key for the graph object. The og:title and og:type properties are the only 2 required fields for creating an object.

NSMutableDictionary<FBGraphObject> *object = [FBGraphObject openGraphObjectForPost];

object[@"og:title"] = @”Run”;

object[@"og:type"] = @"fitness.course";

●   Create an action:  Create a mutable dictionary of FBGraphObject and set the object properties by specifying the property as a key for the graph object.

NSMutableDictionary<FBGraphObject> *action = [FBGraphObject graphObject];

●    Linking the action to the object: This is as simple as setting the <object> property of the action to the FBGraphObjectForPost that you have previously created.

action[@”object”] = object;

Posting the story: Call Open graph API to post the story!!

[FBRequestConnection startForPostWithGraphPath:@"me/fitness.runs"

 graphObject:action completionHandler:^(FBRequestConnection *connection, id result, NSError *error) {

            //handle the result and error here

}];

Custom story:

●     Ask for publish_actions permission to post anything to Facebook on behalf of the user.

This is demonstrated in the Facebook login given in the link below.

https://developers.facebook.com/docs/facebook-login/ios/v2.0

●   Go to the open graph page in your Facebook app and click on create a custom story. Add the story title and the actions and objects relation to your story.

●     Follow steps 2 and 3 from the open graph.

●     An important difference in posting a custom story is in the specification of the path in the API call to post the story. In posting open graph story, the path will be the me/<object type>.<action type> but in custom story, it is me/<fb app namespace>:<action type>.

[FBRequestConnection startForPostWithGraphPath:@"me/x_fitnessapp:run"

 graphObject:action completionHandler:^(FBRequestConnection *connection, id result, NSError *error) {

            //handle the result and error here

}];

The Facebook open graph post looks like the image shown below.

You can even link an existing object with a custom action. For example, in my application, the requirement was that an athlete will be able to run, swim and bike a course object. Facebook has provided common actions of only run and bike but not swim. So, I created a custom action of swim for the same course object associated with run and bike actions.

While creating a custom action, its not enough if you just create the action alone. You also need to create the respective custom story too. If that is not done, posting custom action throws an error.

We sincerely hope that the above tutorial was helpful. If you would like any clarification on the above post, write to us at TalkToUS@hummingwave.com