Building an interactive timeline from facebook photos
-
Upload
rakesh-rajan -
Category
Documents
-
view
1.258 -
download
1
description
Transcript of Building an interactive timeline from facebook photos
![Page 1: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/1.jpg)
Building an interactive timeline from facebook photos
Rakesh Rajan & Pranav Bhasin
July 25, 2009
![Page 2: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/2.jpg)
Agenda1. Intro and Demo2. Evolution3. Challenges 4. Best Practices
![Page 3: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/3.jpg)
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
![Page 4: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/4.jpg)
DEMO!
![Page 5: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/5.jpg)
Evolution
![Page 6: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/6.jpg)
Facebook: Connect v/s App
![Page 7: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/7.jpg)
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
![Page 8: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/8.jpg)
Facebook: IFrame v/s Canvas
Speed
Appearance
URLs
Authentication
![Page 9: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/9.jpg)
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
![Page 10: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/10.jpg)
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
![Page 11: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/11.jpg)
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.
![Page 12: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/12.jpg)
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
![Page 13: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/13.jpg)
Architecture
![Page 14: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/14.jpg)
Issues
![Page 15: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/15.jpg)
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.
![Page 16: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/16.jpg)
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.
![Page 17: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/17.jpg)
Good Practices
![Page 18: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/18.jpg)
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.
![Page 19: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/19.jpg)
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
![Page 20: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/20.jpg)
Web OptimizationsJS optimizations
Event delegationOptimize queries
dojo.query("[attr='xyz']") == bad bad
CSS optimizationsavoid inefficient key selectors.
STOP IE6 SUPPORT!
http://www.stopie6.com/
![Page 21: Building an interactive timeline from facebook photos](https://reader034.fdocuments.us/reader034/viewer/2022052307/5558b9e6d8b42aa52a8b4dce/html5/thumbnails/21.jpg)
Questions?