Developing Apps for Facebook Timeline
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Developing Apps for Facebook Timeline

  • 8,878 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,878
On Slideshare
7,317
From Embeds
1,561
Number of Embeds
11

Actions

Shares
Downloads
64
Comments
1
Likes
5

Embeds 1,561

http://www.facebookgarage.org.uk 1,468
http://blog.bluecrow.biz 66
http://www.linkedin.com 9
http://www.facebookgarage.org.uk.php5-4.dfw1-1.websitetestlink.com 6
http://theloop.com 4
http://www.theloop.com 2
https://www.linkedin.com 2
http://webcache.googleusercontent.com 1
http://a0.twimg.com 1
https://twitter.com 1
http://paper.li 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CONTACT: BLUECROW | 22 PEMBRIDGE CRESCENT, LONDON, W11 3DS | +44 (0) 7868260229 | HTTP://BLUECROW.BIZ info@bluecrow.biz
  • 2. DEVELOPING A FACEBOOK TIMELINE APP info@bluecrow.biz
  • 3. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 4. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 5. TITLE info@bluecrow.biz
  • 6. FOLLOW ALONGgithub.com/tchaffee /fdgl-timeline-appslidesha.re/xdZ48p info@bluecrow.biz
  • 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. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  • 9. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  • 10. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  • 11. STEP 1: CREATE A FACEBOOK APP info@bluecrow.biz
  • 12. STEP 2: AUTHENTICATE USERS info@bluecrow.biz
  • 13. STEP 2: AUTHENTICATE USERSWe will add code to index.html for the Add to Timeline button info@bluecrow.biz
  • 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. 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. STEP 2: AUTHENTICATE USERS info@bluecrow.biz
  • 17. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 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. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 20. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 21. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 22. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 23. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 24. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 25. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 26. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 27. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 28. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 29. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 30. STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION info@bluecrow.biz
  • 31. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  • 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. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  • 34. STEP 4: PUBLISH ACTIONS FOR YOUR USERSCreate a specific Facebook object by adding meta tags to this page info@bluecrow.biz
  • 35. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  • 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. 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. STEP 4: PUBLISH ACTIONS FOR YOUR USERS We will be adding code to this page for the attend action info@bluecrow.biz
  • 39. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  • 40. STEP 4: PUBLISH ACTIONS FOR YOUR USERS info@bluecrow.biz
  • 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. 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. STEP 4: PUBLISH ACTIONS FOR YOUR USERS<form> <input type="button" value="Attend" onclick="postAttend()" /></form> info@bluecrow.biz
  • 44. APPLICATION IS FINISHED!!! info@bluecrow.biz
  • 45. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 46. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 47. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 48. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 49. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 50. FDGL EVENT ATTENDANCE APPLICATION What happens if we attend at least five events? Aggregations? info@bluecrow.biz
  • 51. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 52. FDGL EVENT ATTENDANCE APPLICATION info@bluecrow.biz
  • 53. QUESTIONS? tc@bluecrow.biz @chaffeet info@bluecrow.biz