CONTACT:   BLUECROW   | 22 PEMBRIDGE CRESCENT, LONDON, W11 3DS |   +44 (0) 7868260229 | HTTP://BLUECROW.BIZ   info@bluecro...
DEVELOPING A FACEBOOK TIMELINE APP                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
TITLE        info@bluecrow.biz
FOLLOW ALONGgithub.com/tchaffee  /fdgl-timeline-appslidesha.re/xdZ48p                  info@bluecrow.biz
RECIPE FOR A TIMELINE APPLICATION:Step 1: Create a Facebook appStep 2: Authenticate usersStep 3: Define action, object, an...
STEP 1: CREATE A FACEBOOK APP                                info@bluecrow.biz
STEP 1: CREATE A FACEBOOK APP                                info@bluecrow.biz
STEP 1: CREATE A FACEBOOK APP                                info@bluecrow.biz
STEP 1: CREATE A FACEBOOK APP                                info@bluecrow.biz
STEP 2: AUTHENTICATE USERS                             info@bluecrow.biz
STEP 2: AUTHENTICATE USERSWe will add code to index.html for the       Add to Timeline button                             ...
STEP 2: AUTHENTICATE USERS<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"     xmlns:fb="https://www.face...
STEP 2: AUTHENTICATE USERS<fb:add-to-timeline mode="button"></fb:add-to-timeline><h3>FDGL Events</h3><!-- HTML for links n...
STEP 2: AUTHENTICATE USERS                             info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION Tell Facebook about the Attend actionTell Facebook about the FDGL Event obj...
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION                                     info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS                                 info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERSCreate a “real” Facebook object by adding         meta tags to your page  Write code...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS                                 info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERSCreate a specific Facebook object by adding          meta tags to this page         ...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS                                 info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS<head prefix="og: http://ogp.me/ns# fb:    http://ogp.me/ns/fb# fdgl-events:    http...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS<meta property="og:title"    content="FDGL Jan 2012 Event" /><meta property="og:desc...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS We will be adding code to this page       for the attend action                    ...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS                                 info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS                                 info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERScurl -F access_token=AAAE...   -F fdgl_event=   http://samples.ogp.me/101505...  htt...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS<script type="text/javascript">    function postAttend(){        FB.api(/me/fdgl-eve...
STEP 4: PUBLISH ACTIONS FOR YOUR USERS<form>    <input type="button" value="Attend"        onclick="postAttend()" /></form...
APPLICATION IS FINISHED!!!                             info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION What happens if we attend at least   five events? Aggregations?                         ...
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION                               info@bluecrow.biz
QUESTIONS?             tc@bluecrow.biz             @chaffeet                      info@bluecrow.biz
Upcoming SlideShare
Loading in...5
×

Developing Apps for Facebook Timeline

8,274

Published on

How to develop a simple application for the Facebook Timeline. This was first presented at the January 2012 Facebook Developer Garage London.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,274
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
68
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Developing Apps for Facebook Timeline

  1. 1. CONTACT: BLUECROW | 22 PEMBRIDGE CRESCENT, LONDON, W11 3DS | +44 (0) 7868260229 | HTTP://BLUECROW.BIZ info@bluecrow.biz
  2. 2. DEVELOPING A FACEBOOK TIMELINE APP info@bluecrow.biz
  3. 3. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  4. 4. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  5. 5. TITLE info@bluecrow.biz
  6. 6. FOLLOW ALONGgithub.com/tchaffee /fdgl-timeline-appslidesha.re/xdZ48p info@bluecrow.biz
  7. 7. RECIPE FOR A TIMELINE APPLICATION:Step 1: Create a Facebook appStep 2: Authenticate usersStep 3: Define action, object, and aggregationStep 4: Publish Actions for your usersStep 5: Add Social Plugins: Activity plugin, etc.Step 6: Submit Your Actions for approval info@bluecrow.biz
  8. 8. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  9. 9. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  10. 10. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  11. 11. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  12. 12. STEP 2: AUTHENTICATE USERS info@bluecrow.biz
  13. 13. STEP 2: AUTHENTICATE USERSWe will add code to index.html for the Add to Timeline button info@bluecrow.biz
  14. 14. STEP 2: AUTHENTICATE USERS<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml"><head><head/><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script> FB.init({ appId:YOUR APP ID HERE, cookie:true, status:true, xfbml:true, oauth:true });</script> info@bluecrow.biz
  15. 15. STEP 2: AUTHENTICATE USERS<fb:add-to-timeline mode="button"></fb:add-to-timeline><h3>FDGL Events</h3><!-- HTML for links not shown --></body></html> info@bluecrow.biz
  16. 16. STEP 2: AUTHENTICATE USERS info@bluecrow.biz
  17. 17. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  18. 18. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION Tell Facebook about the Attend actionTell Facebook about the FDGL Event object How should it look on the timeline? info@bluecrow.biz
  19. 19. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  20. 20. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  21. 21. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  22. 22. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  23. 23. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  24. 24. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  25. 25. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  26. 26. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  27. 27. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  28. 28. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  29. 29. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  30. 30. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  31. 31. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  32. 32. STEP 4: PUBLISH ACTIONS FOR YOUR USERSCreate a “real” Facebook object by adding meta tags to your page Write code to POST the attend action info@bluecrow.biz
  33. 33. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  34. 34. STEP 4: PUBLISH ACTIONS FOR YOUR USERSCreate a specific Facebook object by adding meta tags to this page info@bluecrow.biz
  35. 35. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  36. 36. STEP 4: PUBLISH ACTIONS FOR YOUR USERS<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# fdgl-events: http://ogp.me/ns/fb/fdgl-events#"> <meta property="fb:app_id" content="S/B CORRECT" /> <meta property="og:type" content="fdgl-events:fdgl_event" /> <meta property="og:url" content="http://.../fdgl-201201" /> info@bluecrow.biz
  37. 37. STEP 4: PUBLISH ACTIONS FOR YOUR USERS<meta property="og:title" content="FDGL Jan 2012 Event" /><meta property="og:description" content="FDGL Jan 2012 Event Desc" /><meta property="og:image” content="http://x.com/etc” /> Thats it. The page is now a specific FDGL Event according to Facebook info@bluecrow.biz
  38. 38. STEP 4: PUBLISH ACTIONS FOR YOUR USERS We will be adding code to this page for the attend action info@bluecrow.biz
  39. 39. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  40. 40. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  41. 41. STEP 4: PUBLISH ACTIONS FOR YOUR USERScurl -F access_token=AAAE... -F fdgl_event= http://samples.ogp.me/101505... https://graph.facebook.com /me/fdgl-events:attend info@bluecrow.biz
  42. 42. STEP 4: PUBLISH ACTIONS FOR YOUR USERS<script type="text/javascript"> function postAttend(){ FB.api(/me/fdgl-events:attend + ?fdgl_event= + http://fdgl.bluecrow.biz/ + fdgl-201201.html, post, postAttendCallback); }</script> info@bluecrow.biz
  43. 43. STEP 4: PUBLISH ACTIONS FOR YOUR USERS<form> <input type="button" value="Attend" onclick="postAttend()" /></form> info@bluecrow.biz
  44. 44. APPLICATION IS FINISHED!!! info@bluecrow.biz
  45. 45. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  46. 46. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  47. 47. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  48. 48. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  49. 49. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  50. 50. FDGL EVENT ATTENDANCE APPLICATION What happens if we attend at least five events? Aggregations? info@bluecrow.biz
  51. 51. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  52. 52. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  53. 53. QUESTIONS? tc@bluecrow.biz @chaffeet info@bluecrow.biz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×