Upload
todd-chaffee
View
8.898
Download
1
Embed Size (px)
DESCRIPTION
How to develop a simple application for the Facebook Timeline. This was first presented at the January 2012 Facebook Developer Garage London.
Citation preview
CONTACT: BLUECROW | 22 PEMBRIDGE CRESCENT, LONDON, W11 3DS | +44 (0) 7868260229 | HTTP://BLUECROW.BIZ [email protected]@bluecrow.biz
DEVELOPING A FACEBOOK TIMELINE APP
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
TITLE
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
STEP 1: CREATE A FACEBOOK APP
STEP 1: CREATE A FACEBOOK APP
STEP 1: CREATE A FACEBOOK APP
STEP 1: CREATE A FACEBOOK APP
STEP 2: AUTHENTICATE USERS
STEP 2: AUTHENTICATE USERS
We 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.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>
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>
STEP 2: AUTHENTICATE USERS
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
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?
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 3: DEFINE ACTION, OBJECT, AND AGGREGATION
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
Create a “real” Facebook object by addingmeta tags to your page
Write code to POST the 'attend' action
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
Create a specific Facebook object by addingmeta tags to this page
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
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" />
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 Eventaccording to Facebook
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
We will be adding code to this pagefor the 'attend' action
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
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'
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>
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
<form> <input type="button" value="Attend" onclick="postAttend()" /></form>
APPLICATION IS FINISHED!!!
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION
What happens if we attend at leastfive events? Aggregations?
FDGL EVENT ATTENDANCE APPLICATION
FDGL EVENT ATTENDANCE APPLICATION