O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Myles Noton @mylesnoton www.miniclip.com
<ul><li>Unique visitors / month </li></ul>65,000,000+
<ul><li>Registered users </li></ul>20,000,000
<ul><li>Flash and Shockwave Games </li></ul>500+
<ul><li>At least  7  employees MIA in on-going Nerf wars… </li></ul>
 
 
<ul><li>PS3 / Xbox 360 / Wii </li></ul><ul><li>Free Beer & Drinks </li></ul><ul><li>Roof Terrace </li></ul><ul><li>Yoga </...
<ul><li>http://corporate.miniclip.com/careers </li></ul>We’re hiring!
How we use the Facebook Platform
<ul><li>Because of our size, the site could be impersonal and anonymous at times </li></ul>The  UX  Problem Using the Face...
<ul><li>Er... Who are these guys? </li></ul>
<ul><li>Yay, </li></ul><ul><li>My Friends! </li></ul>
Technologies we used… <ul><li>Facebook Connect </li></ul><ul><li>Facebook Javascript SDK </li></ul><ul><li>Flash External ...
Facebook Connect <ul><li>Auto Signup with API User Data </li></ul><ul><li>Frictionless, Quick & Convenient </li></ul><ul><...
<ul><li>FB.ui components used to allow users to post challenges to friends </li></ul>FB.ui
<ul><li>Users can invite friends to play on Miniclip from the league </li></ul>
flash.external.ExternalInterface <ul><li>Call Javascript from within flash </li></ul><ul><li>Directly interface with the J...
Login triggered from Flash
Notification Triggered from flash
<ul><li>No More Polling </li></ul><ul><li>Pre-cached fresh data </li></ul><ul><li>Works better with offline access </li></...
Before Real-time API Facebook User Miniclip Profile Update API Call to get data 8
After Real-time API Facebook User Miniclip Profile Update Notification of change Call to get changed data
Implementing the Real-time API <ul><li>Create an endpoint </li></ul><ul><li>- Web service or script triggered on FB event ...
<ul><li>http://developers.facebook.com/docs/api/realtime/ </li></ul>
Gotchas
 
<ul><li>Per 600 seconds </li></ul>600 Requests
<ul><li>Not http </li></ul>Use https + Token
<ul><li>Invite request bounces to  Facebook  Homepage </li></ul>Requests 2.0
<ul><li>Only  canvas  apps are supported </li></ul>Requests 2.0
Modal boxes appear behind flash content FB.ui & Flash
 
<ul><li>Be careful with window modes </li></ul>Display: ‘popup’ Wmode=“opaque”
Birthday  was not being returned from the API
Próximos SlideShares
Carregando em…5
×

Facebook API in the Real World - Myles Noton - Miniclip

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

  • Entre para ver os comentários

Facebook API in the Real World - Myles Noton - Miniclip

  1. 1. Myles Noton @mylesnoton www.miniclip.com
  2. 2. <ul><li>Unique visitors / month </li></ul>65,000,000+
  3. 3. <ul><li>Registered users </li></ul>20,000,000
  4. 4. <ul><li>Flash and Shockwave Games </li></ul>500+
  5. 5. <ul><li>At least 7 employees MIA in on-going Nerf wars… </li></ul>
  6. 8. <ul><li>PS3 / Xbox 360 / Wii </li></ul><ul><li>Free Beer & Drinks </li></ul><ul><li>Roof Terrace </li></ul><ul><li>Yoga </li></ul><ul><li>Pool Table </li></ul><ul><li>Foosball </li></ul><ul><li>Arcade Games </li></ul><ul><li>Free Ice cream </li></ul><ul><li>etc... </li></ul>
  7. 9. <ul><li>http://corporate.miniclip.com/careers </li></ul>We’re hiring!
  8. 10. How we use the Facebook Platform
  9. 11. <ul><li>Because of our size, the site could be impersonal and anonymous at times </li></ul>The UX Problem Using the Facebook Platform and feature we call the “Players League” Our Solution
  10. 12. <ul><li>Er... Who are these guys? </li></ul>
  11. 13. <ul><li>Yay, </li></ul><ul><li>My Friends! </li></ul>
  12. 14. Technologies we used… <ul><li>Facebook Connect </li></ul><ul><li>Facebook Javascript SDK </li></ul><ul><li>Flash External Interface </li></ul><ul><li>Facebook Real-time API </li></ul><ul><li>Facebook Graph API </li></ul>
  13. 15. Facebook Connect <ul><li>Auto Signup with API User Data </li></ul><ul><li>Frictionless, Quick & Convenient </li></ul><ul><li>Single Click Sign-in </li></ul>
  14. 16. <ul><li>FB.ui components used to allow users to post challenges to friends </li></ul>FB.ui
  15. 17. <ul><li>Users can invite friends to play on Miniclip from the league </li></ul>
  16. 18. flash.external.ExternalInterface <ul><li>Call Javascript from within flash </li></ul><ul><li>Directly interface with the Javascript SDK </li></ul><ul><li>Trigger API messages and events based on in game events </li></ul>
  17. 19. Login triggered from Flash
  18. 20. Notification Triggered from flash
  19. 21. <ul><li>No More Polling </li></ul><ul><li>Pre-cached fresh data </li></ul><ul><li>Works better with offline access </li></ul>Real-time API
  20. 22. Before Real-time API Facebook User Miniclip Profile Update API Call to get data 8
  21. 23. After Real-time API Facebook User Miniclip Profile Update Notification of change Call to get changed data
  22. 24. Implementing the Real-time API <ul><li>Create an endpoint </li></ul><ul><li>- Web service or script triggered on FB event </li></ul><ul><li>Subscribe to events </li></ul><ul><ul><li>- Receive confirmation of subscription from Facebook (once only) </li></ul></ul>
  23. 25. <ul><li>http://developers.facebook.com/docs/api/realtime/ </li></ul>
  24. 26. Gotchas
  25. 28. <ul><li>Per 600 seconds </li></ul>600 Requests
  26. 29. <ul><li>Not http </li></ul>Use https + Token
  27. 30. <ul><li>Invite request bounces to Facebook Homepage </li></ul>Requests 2.0
  28. 31. <ul><li>Only canvas apps are supported </li></ul>Requests 2.0
  29. 32. Modal boxes appear behind flash content FB.ui & Flash
  30. 34. <ul><li>Be careful with window modes </li></ul>Display: ‘popup’ Wmode=“opaque”
  31. 35. Birthday was not being returned from the API
  32. 36. <ul><li>Always sanity check data from the API and plan for failure </li></ul>Never trust the data
  33. 37. <ul><li>http://corporate.miniclip.com/careers </li></ul>We’re hiring!
  34. 38. <ul><li>@ miniclip </li></ul>@mylesnoton
  35. 39. Questions?

×