You are on page 1of 51

Open Graph:

Gareth Morris Partner Engineer, Games

Driving installs and re-engagement

LISTEN READ
Like

RUN

Like

EAT
Like

Like

SongPop
Grew to almost

. M MAU in months
Open Graph drove

M clicks in July

Native Apps

Native Apps

Open Graph

Canvas

Canvas

Getting started quickly

Built-in actions

High Scores
Publish a score for each player

High Scores: Timeline

High Scores: Tournaments

Perfect t for a weekly tournament Easy to reset all scores for your game High score and passing stories start again from zero

Diamond Dash

Moved from custom OG to Scores Saw increase in clicks

Achievements

Badges your users can earn and show off on their timeline points to distribute across your games achievements

Achievement should be things that..


Users feel proud of Friends nd engaging Are interesting for new users Have a range of difculties Scarcity is important

Unlock the power of the Open Graph

Custom actions and objects

Start simple

What are the core user interactions in your game?

. Model your data

Action type

Object type

Action

Object

. Model your data

. Design Timeline Aggregations

. Markup and expose objects on the web


<head prefix="og: http://ogp.me/ns#"> <meta property="og:type" content="gdcdemo:weapon" /> <meta property="og:title" content="Master Sword" /> <meta property="og:url" content="http://apps.facebook.com/app/object" /> <meta property="og:image" content="http://mysite.com/img.jpg" /> ...

. Publish Actions via the API


curl -F 'access_token=<access_token>' -F 'weapon=http://apps.facebook.com/app/object' \ 'https://graph.facebook.com/me/myapp:craft'

Object URL

Action Name

Craft a weapon
Action type Object type

Craft

Weapon
Power: integer cost: integer

Timeline Aggregation

Cong: Check Namespace / Canvas URL

Cong: Create Weapon Object Type

Cong: Create Craft Action Type

Cong: Create Aggregation

Markup and Expose Weapon Objects

Get Code for sample meta tags:

Expose on a URL - example: https://apps.facebook.com/wfactory/weapon/sword.html Run through the debugger to check syntax: https://developers.facebook.com/tools/debug

Important: og:url for Canvas apps

Your objects should live on canvas:


<meta property="og:url" content="http://apps.facebook.com/wfactory/object/id" />

Our scraper will use your canvas callback url as with all other requests:

https://apps.facebook.com/wfactory/object/id => https://stark-river.herokuapp.com/object/id

Avoids a broken mobile redirect experience Enables install-tracking so your stories get maximum distribution

Publish Actions

Use Graph API Explorer to test: https://developers.facebook.com/tools/explorer

Publish Actions

View story in Activity Log - click permalink for full story

Check your App Tabs

Or navigate directly: https://www.facebook.com/UID/app_NAMESPACE e.g: https://www.facebook.com/gjm/app_wfactory

Check your App Tabs

All Activity within your app shown here, including Timeline Aggregations

User Generated Objects


Do users create content as they play your game? Create object markup dynamically

Social context

Stories are more interesting when a users friends are involved

User Proles
<head prefix="og: http://ogp.me/ns#"> <meta property="og:type" content="profile" /> <meta property="og:title" content="Gareth Morris" /> <meta property="og:url" content="http://myapp.com/object_id" /> <meta property="fb:profile_id" content="685145706" /> ...

Reference a Facebook prole

Sell a weapon
Action type Object type

Sell
prole: prole price: integer

Weapon
power: integer cost: integer

Cong: Add Prole Object Type to App

Global object type: No conguration needed

Cong: Add Sell Action Type

Custom properties for price / prole - required elds

Cong: Add Sell Action Type

Congure action caption to give interesting story context

Publish Actions

Specify custom properties at time action is published:

Markup and Expose Prole Objects

Remember to include fb:prole_id to reference the Facebook prole:


<head prefix="og: http://ogp.me/ns#"> <meta property="og:type" content="profile" /> <meta property="og:title" content="Gareth Morris" /> <meta property="og:url" content="http://apps.facebook.com/..." /> <meta property="fb:profile_id" content="685145706" /> ...

Expose on a URL - example: https://apps.facebook.com/wfactory/prole/ali.html Run through the debugger to check syntax: https://developers.facebook.com/tools/debug

Sell a weapon: Results

Timeline Aggregations

Use different Order By congurations to show interesting data views

Open Graph Insights

Track your progress

Summary

Use the Built in actions Custom open graph for core user interactions Add social context Monitor usage via Insights

You might also like