You are on page 1of 36

Simple steps to build and grow a social game on Facebook.

com
Colin Creitz Partner Engineer, Games

Games on Facebook.com
Discovery/Acquisition:
Users discover apps through their App center, friends, play stories etc.

Retention:
Channels like Bookmarks, notications enable developers to easily re-engage users.

Monetization:
Facebook payments allow developers to monetize

What This Talk Is

Simple Steps to making your Canvas game social there.

Introduction to Social Channels on Facebook.com Simple tutorial to get you

AgarMan: Our Sample App

Demo: Agarman : The non-social version

How to Build a Game on the FB Platform


1. Host the game in Canvas 2. Implement OAuth 3. Add game invites via Requests 4. Add bragging stories via Feed Dialog 5. Publishing scores 6. Publishing achievements

Step : Integrating with Canvas

Demo: Getting Started


Introduction to the Developer App
Create a new App Enter in the basic settings to get started Preview AgarMan on Canvas

Step : Authentication

Facebook Authentication
Built on OAuth

FB builds access tokens on

request, pending approval


Two kinds

User Access Token - take action on behalf of a user App Access Token - take action on behalf of an app

Facebook Authentication
Oauth tokens are bearer

instruments, like cash


Take care in storing or sending

them

Permissions
Perm Name
basic

What You Get


Name, Prole Image, Friends

email

email address

publish_actions

Scores, Achievements, Open Graph

Setting up your apps auth dialog

Demo: Authentication on Canvas


Use the PHP SDK Implement authentication for Canvas Use the scope param to ask for email, publish_actions Use the redirect_uri param to tell FB how you want to be

given the users data

What is Signed Request?


Array ( [algorithm] => HMAC-SHA256 [expires] => 1344664800 [issued_at] => 1344660265

[oauth_token] => AAABewwhuD[...]yDegERMgpaGmWod6COaPmg


[user] => Array ( [country] => us [locale] => en_US [age] => Array ( [min] => 21 ) )

[user_id] => 100002669403922


)

Step : Requests

Social Channels: Requests

Use Case: Invites


Use invites to acquire new users. Make a prominent Invite button.

The Graph API


A RESTful interface to Facebooks services An endpoint for each object and connection Read using HTTP GET Write using POST (mostly) Delete using DELETE

The Graph API


A RESTful interface to Facebooks services An endpoint for each object and connection Read using HTTP GET Write using POST (mostly) Delete using DELETE To read about the current user:

GET https://graph.facebook.com/ME

Demo: Requests
Use the JavaScript SDK to send Invites via Requests Use the Graph API or the JS SDK to manage Requests

Step : Feed

Social Channels: Feed


Posting to Users Wall

Use Case: Bragging


Canonical Feed use case. Allows a personal message.

Demo: Feed
Use the JS SDK to post to the users Timeline
var obj = { method: 'feed', link: 'https://apps.facebook.com/agarman/?ftext=1', picture: 'http://my.domain/pic.png', name: 'Im a word hero!', caption: 'My word in AGAR MAN is the coolest', description: 'I played the word AWESOME for 36 points, + using the letters AEMORWY. Can you do better?', }; FB.ui(obj, callback);

Step : Scores

Social Channels: Scores


curl https://graph.facebook.com/USER_ID/scores -F score=1337 -F access_token=APP_ACCESS_TOKEN

Demo: Saving a Users Score


Save a user score with the Graph API via PHP
POST https://graph.facebook.com/USER_ID/ scores? access_token=APP_ACCESS_TOKEN& score=NUMERIC_SCORE_GT_0

More on scores
Keep track of scores locally Build and feature a leaderboard Consider periodic score resets
DELETE https://graph.facebook.com/APP_ID/scores &access_token=APP_ACCESS_TOKEN

Step : Achievements

Achievements
1. Write an Open Graph web page for your resource
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fbpayment:http://ogp.me/ns/fb/game#"> <meta property="fb:app_id" content="YOUR_APP_ID" > <meta property="og:type" content="game.achievement" > <meta property="og:url" content="http://apps.facebook.com/YOURAPP/ACHIEVEMENTPATH" > <meta property="og:title" content="Achievement Title" > <meta property="og:description" content="Longer description" > <meta property="og:image" content="IMAGE_URL_50x50px" > <meta property="game:points" content="NUMBER IN [1-1000]" > </head>

Achievements
1. Write an Open Graph web page for your resource 2. Register your achievement

POST https://graph.facebook.com/APP_ID/achievements? access_token=APP_ACCESS_TOKEN& achievement=ACHIEVEMENT_URL& display_order=ORDER_NUMBER

Achievements
1. Write an Open Graph web page for your resource 2. Register your achievement 3. Grant your achievement to a user
POST https://graph.facebook.com/USER_ID/achievements? access_token=APP_ACCESS_TOKEN& achievement=ACHIEVEMENT_URL

Turn off Sandbox mode and go public

Summary: steps to Build a Game on the fb Platform


1. Host the Game within a Canvas + Fluid Canvas 2. Implement Auth 3. Add Game Invites - via Requests 4. Add bragging stories - via Feed Dialog 5. Publishing Scores 6. Publishing Achievements

Learn More!
developers.facebook.com Developer blog facebook.stackoverow.com