View
1.261
Download
1
Category
Tags:
Preview:
DESCRIPTION
Lifeblob allows you to get the moments of your life on a timeline and navigate through relations to discover how you are connected with others. Rakesh will talk about the experience in building a facebook application around this concept, the challenges faced and the best practices that they learnt along the way.
Citation preview
Building an interactive timeline from facebook photos
Rakesh Rajan & Pranav Bhasin
July 25, 2009
Agenda1. Intro and Demo2. Evolution3. Challenges 4. Best Practices
Intro
lifeblob ...where memories come alive! Tell your story on a timelineConnect with stories of your friendsNavigate through relations
lifeblob facebook app
Discover photos through relationshttp://apps.facebook.com/lifeblob
DEMO!
Evolution
Facebook: Connect v/s App
Facebook: Connect v/s AppCanvas/Iframe Application ( a.k.a FB apps )Connect Application (External sites with FB elements)
Comparison:
1. FBML: Canvas2. XFBML: Connect
Similar to FBML tagsfb: serverfbml
3. FQL: Both4. FBJS
Facebook: IFrame v/s Canvas
Speed
Appearance
URLs
Authentication
Step 1: Facebook Connect
Facebook largest photo sharing site on the internet.
Users can register for your site with just two clicks!
FBConnect is easy to implement. <html xmlns="http://www.w3.org/1999/xhtml xmlns:fb="http://www.facebook.com/2008/fbml">
Include FB javascript in BODY section.<fb:login-button></fb:login-button>FB.init("APIKEY", <path to xd_receiver.htm);
User permission and caching
Privacy
FBConnect: Registration
lifeblob - user timelines and anonymous timelines
If a user is already member of lifeblob and later links up facebook, don't create multiple timelines!
connect.registerUsers
publish email hashesFB returns the email hash upon login - helpful for merging accounts
Issues: multiple emails
FBConnect: Sync Data
Cache Cache Cache!Facebook allows to store certain data upto a day. Have cron jobs to sync up data like user's name, pic etc everyday.
Get offline access from users - only a few grant it.
Facebook Application
Uses the same infrastructure and code (mostly) that of the main site
IFrame based fb app / connect based site have same amount of strength.
Registration required - no anonymous browsing.
IFrame application - backend using java api
Architecture
Issues
IFrame URLs
Urls do not changeBack button breaksSharing breaks
Solution: http://wiki.developers.facebook.com/index.php/IFrame_Url
FB.CanvasClient.syncUrl()syncUrl will report any inner URL to the outer frame and append it to the URL hashCan override the browser's back and forward buttons.
IFrame App - Authentication
First hit to Iframe - Various session parameters as request parameters
2 ways to continue:
Pass parameters to all the internal linksDummy page to save cookie using javascript
We started with passing parameters - Issues with using the app and site at the same time.
Cookie mismatch - only subset of request parameters in cookies.
Good Practices
FQL - Enhancementsbatch.run - Combines multiple seperate API calls into a single request
Max limit: 20
fql.multiquery - Runs multiple queries in one call and return the data at one time
We reduced 5 queries into 1!"query1":"select uid from event_member where eid=<>""query2":"select name from profile where uid in (select uid from #query1)"
Preload FQL - Let FB "eagerly" send you data upfront.
More ...Track everything. - GA provides event tracking
how many people accepted the appconversion of people from newsfeed, notifications and invites.viral coefficient
Notifications/Invites - limit per user
track number of notifications and invites senttrack hideall/spam reports
When building a node using xfbml, prefer parseDomElement over parseDomTree
Web OptimizationsJS optimizations
Event delegationOptimize queries
dojo.query("[attr='xyz']") == bad bad
CSS optimizationsavoid inefficient key selectors.
STOP IE6 SUPPORT!
http://www.stopie6.com/
Questions?
Recommended