35
Myles Noton @mylesnoton www.miniclip.com

Facebook API in the Real World - Myles Noton - Miniclip

Embed Size (px)

DESCRIPTION

Slides from my presentation about how we at Miniclip have used the Facebook Platform to increase engagement.

Citation preview

Page 1: Facebook API in the Real World - Myles Noton - Miniclip

Myles Noton@mylesnoton

www.miniclip.com

Page 2: Facebook API in the Real World - Myles Noton - Miniclip

Unique visitors / month65,000,000+

Page 3: Facebook API in the Real World - Myles Noton - Miniclip

Registered users20,000,000

Page 4: Facebook API in the Real World - Myles Noton - Miniclip

Flash and Shockwave Games500+

Page 5: Facebook API in the Real World - Myles Noton - Miniclip

At least 7 employees MIA in on-going Nerf wars…

Page 6: Facebook API in the Real World - Myles Noton - Miniclip
Page 7: Facebook API in the Real World - Myles Noton - Miniclip
Page 8: Facebook API in the Real World - Myles Noton - Miniclip

How we use the Facebook Platform

Page 9: Facebook API in the Real World - Myles Noton - Miniclip

Because of our size, the site could be impersonal and anonymous at times

The UX Problem

Using the Facebook Platform and feature we call the “Players League”

Our Solution

Page 10: Facebook API in the Real World - Myles Noton - Miniclip

Er... Who are these guys?

Page 11: Facebook API in the Real World - Myles Noton - Miniclip

Yay,My Friends!

Page 12: Facebook API in the Real World - Myles Noton - Miniclip

Technologies we used…

• Facebook Connect• Facebook Javascript SDK• Flash External Interface• Facebook Real-time API• Facebook Graph API

Page 13: Facebook API in the Real World - Myles Noton - Miniclip

Facebook Connect• Auto Signup with API User Data• Frictionless, Quick & Convenient• Single Click Sign-in

Page 14: Facebook API in the Real World - Myles Noton - Miniclip

FB.ui components used to allow users to post challenges to friends

FB.ui

Page 15: Facebook API in the Real World - Myles Noton - Miniclip

Users can invite friends to play on Miniclip from the league

Page 16: Facebook API in the Real World - Myles Noton - Miniclip

flash.external.ExternalInterface

• Call Javascript from within flash• Directly interface with the Javascript SDK• Trigger API messages and events based on in

game events

Page 17: Facebook API in the Real World - Myles Noton - Miniclip

Login triggered from Flash

Page 18: Facebook API in the Real World - Myles Noton - Miniclip

Notification Triggered from flash

Page 19: Facebook API in the Real World - Myles Noton - Miniclip

• No More Polling• Pre-cached fresh data• Works better with offline access

Real-time API

Page 20: Facebook API in the Real World - Myles Noton - Miniclip

Facebook

User

Miniclip

Profile Update

API Call to get data

Before Real-time API

8

Page 21: Facebook API in the Real World - Myles Noton - Miniclip

After Real-time API

Facebook

User

Miniclip

Profile Update

Notification of change

Call to get changed data

Page 22: Facebook API in the Real World - Myles Noton - Miniclip

Implementing the Real-time API

1. Create an endpoint - Web service or script triggered on FB event2. Subscribe to events

- Receive confirmation of subscription from Facebook (once only)

Page 23: Facebook API in the Real World - Myles Noton - Miniclip

http://developers.facebook.com/docs/api/realtime/

Page 24: Facebook API in the Real World - Myles Noton - Miniclip

Gotchas

Page 25: Facebook API in the Real World - Myles Noton - Miniclip
Page 26: Facebook API in the Real World - Myles Noton - Miniclip

Per 600 seconds600 Requests

Page 27: Facebook API in the Real World - Myles Noton - Miniclip

Not httpUse https + Token

Page 28: Facebook API in the Real World - Myles Noton - Miniclip

Invite request bounces to Facebook HomepageRequests 2.0

Page 29: Facebook API in the Real World - Myles Noton - Miniclip

Only canvas apps are supportedRequests 2.0

Page 30: Facebook API in the Real World - Myles Noton - Miniclip

Modal boxes appear behind flash contentFB.ui & Flash

Page 31: Facebook API in the Real World - Myles Noton - Miniclip
Page 32: Facebook API in the Real World - Myles Noton - Miniclip

Be careful with window modes

Display: ‘popup’

Wmode=“opaque”

Page 33: Facebook API in the Real World - Myles Noton - Miniclip

Birthday was not being returned from the API

Page 34: Facebook API in the Real World - Myles Noton - Miniclip

Always sanity check data from the API and plan for failureNever trust the data

Page 35: Facebook API in the Real World - Myles Noton - Miniclip

http://corporate.miniclip.com/careers

We’re hiring!

@miniclip@mylesnoton