View
8.898
Download
1
Category
Preview:
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 info@bluecrow.bizinfo@bluecrow.biz
info@bluecrow.biz
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 ALONG
github.com/tchaffee /fdgl-timeline-app
slidesha.re/xdZ48p
info@bluecrow.biz
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
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 USERS
We will add code to index.html for the 'Add to Timeline' button
info@bluecrow.biz
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
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
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' action
Tell Facebook about the 'FDGL Event' object
How should it look on the timeline?
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 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 USERS
Create a “real” Facebook object by addingmeta tags to your page
Write code to POST the 'attend' action
info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
Create a specific Facebook object by addingmeta tags to this page
info@bluecrow.biz
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://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
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
info@bluecrow.biz
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
We will be adding code to this pagefor the 'attend' action
info@bluecrow.biz
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 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
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
STEP 4: PUBLISH ACTIONS FOR YOUR USERS
<form> <input type="button" value="Attend" onclick="postAttend()" /></form>
info@bluecrow.biz
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 leastfive events? Aggregations?
info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION
info@bluecrow.biz
FDGL EVENT ATTENDANCE APPLICATION
info@bluecrow.biz
QUESTIONS?
tc@bluecrow.biz@chaffeet
Recommended