My recent thoughts is to deeply integrate social networking with As part of the mission, I already added FB Like, +1, tweet button to almost all pages / apps including blog posts. Last week I added custom Open graph obejct (badge) and actions (earn) to the game Tic Tac Toe Extended. Since the game already had a collectible like item namely badges, the task turned out to be very simple.

Open Graph Earn / Badge Architecture:

The goal is to let the player `earn` a `badge` object at the end of each game, where the badges are ranked based on IQ level. Or in other words, to make feed story that says `User has earned Student badge on Tic Tac Toe Extended`. The procedure will look complex for first timer, but its very simple as long as we rightly follow the docs correctly. I will explain things that I done step by step:

  1. Create pages that represent badge objects.
  2. Create an app @ Facebook Developers Apps.
  3. Configure earn action and badge object.
  4. Call OpenGraph API from in-game.

1. Page for Badge objects

I wrote a simple PHP scriptto map to 10 different in-game badges. The badge pages have the following meta tags for the facebook to identify them as Open Graph objects.

<meta property="fb:app_id" content="<app-id>" />
<meta property="og:type" content="ggtestapplication:badge"/>
<meta property="og:url" content="http:/localhost/ttt/badge.php?rank=10"/>
<meta property="og:title" content="Amoeba"/>
<meta property="og:image" content="http://localhost/ttt/images/Amoeba.png"/>
<meta property="og:description" content="Amoeba huh? Wish you atleast had multi celled brains."/>
<meta property="ggtestapplication:rank" content="10"/>

2. Create an app @ Facebook Developers Apps

Goto Facebook Developers and create a new app filling out the all the fields.

Facebook Create application

Sample Application creation dialog in Facebook Developers App

3. Configure earn action and badge object

Goto Open Graph Dashboard and create a new object, name it Badge. Add one custom Integer property and name it rank. This rank is to give different weight-age to different badges.

Open Graph Badge Object

Badge Open Graph object with custom Rank Parameter for Tic Tac Toe Extended

Similarly create `earn` action connected with `badge` object, so as to make the badge earnable. Optionally add a `report` String parameter which can be used to present with the game win / lose and game timings. Your earn action page should look like this after the above setup:

Open Graph Earn Action

earn action configured in open graph

Open Graph Earn Action Story Configuration

Open Graph Earn Action Story Configuration

Tip: While configuring story attachment and in aggregations, the object and action variables can be accessed by placing them in between paranthesis `{}`. Apart from our custom objects / actions, several templates are provided, which are documented very well in developer docs.

4. Call OpenGraph API from in-game

With everything setup properly, now we can get into coding. When the game is over and scores are calculated, the action can be posted with the following code:

FB.api('/me/' + 'tictactoeextended:earn',
    {'report' : TicTacToe.GameState.gameDescription,
    badge : '' + (10 - TicTacToe.GameState.rank) },
    function(response) {

Before calling this code to post an action, the user should be logged in with corresponding `posting` permissions. I will write those procedures for those in my next upcoming posts. With all this done right, when I finish a game, an activity gets posted in my profile as shown below:

Tic Tac Toe Extended Activity Feed

Earn Badge action of Tic Tac Toe Extended showing up in Facebook Activity stream

Open Graph Aggregations

If you accomplished all the above steps, setting up an aggregation is just a piece of cake and I setup an aggregation box and it looks as below:

Tic Tac Toe Extended - Facebook Aggregations

Aggregations box in Facebook profile page for Tic Tac Toe Extended

PS: After finishing all this, I couldn’t submit the app to Facebook App Center as it require a secure URL (https) to access the game and I dont have SSL setup in my server 🙁 But I will be buying it soon and submit it to app center.