Developing Apps for Facebook Timeline
•
6 gefällt mir•3,863 views
The document outlines the steps to create a Facebook timeline application to track event attendance: 1) Create a Facebook app and authenticate users. 2) Define an "Attend" action and "Event" object to publish to timelines. 3) Publish actions for users by adding metadata to event pages and coding an "Attend" button. 4) Aggregations like badges could be added for multiple attendances.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Developing Apps for Facebook Timeline
Ähnlich wie Developing Apps for Facebook Timeline (20)
Mehr von Todd Chaffee
Mehr von Todd Chaffee (9)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Developing Apps for Facebook Timeline
- 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 ALONG github.com/tchaffee /fdgl-timeline-app slidesha.re/xdZ48p info@bluecrow.biz
- 7. RECIPE FOR A TIMELINE APPLICATION: Step 1: Create a Facebook app Step 2: Authenticate users Step 3: Define action, object, and aggregation Step 4: Publish Actions for your users Step 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 USERS We 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' action Tell 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 USERS Create 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 USERS Create 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” /> That's 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 USERS curl -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