Download to read offline
![Web Optimizations
JS optimizations
Event delegation
Optimize queries
dojo.query("[attr='xyz']") == bad bad
CSS optimizations
avoid inefficient key selectors.
STOP IE6 SUPPORT!
http://www.stopie6.com/](https://image.slidesharecdn.com/facebookgarage2009-100825043929-phpapp02/85/Building-an-interactive-timeline-from-facebook-photos-20-320.jpg)
Uploaded byRakesh Rajan
Building an interactive timeline from facebook photos
The document discusses the creation of an interactive timeline application called Lifeblob that connects user memories through Facebook photos. It covers the application's evolution, best practices in integrating with Facebook APIs, and technical challenges, including user authentication and data synchronization. The presentation emphasizes the benefits of utilizing Facebook Connect for user registration and data management while addressing optimization and efficiency in app development.
Building an interactive timeline from facebook photos
- 1. Building an interactivetimeline from facebook photos Rakesh Rajan & Pranav Bhasin July 25, 2009
- 2. Agenda 1. Intro and Demo 2. Evolution 3. Challenges 4. Best Practices
- 3. Intro lifeblob ...where memories come alive! Tell your story on a timeline Connect with stories of your friends Navigate through relations lifeblob facebook app Discover photos through relations http://apps.facebook.com/lifeblob
- 4.
- 5.
- 6.
- 7. Facebook: Connect v/sApp Canvas/Iframe Application ( a.k.a FB apps ) Connect Application (External sites with FB elements) Comparison: 1. FBML: Canvas 2. XFBML: Connect Similar to FBML tags fb: serverfbml 3. FQL: Both 4. FBJS
- 8. Facebook: IFrame v/sCanvas Speed Appearance URLs Authentication
- 9. Step 1: FacebookConnect 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
- 10. 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 hashes FB returns the email hash upon login - helpful for merging accounts Issues: multiple emails
- 11. 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.
- 12. 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
- 13.
- 14.
- 15. IFrame URLs Urls do not change Back button breaks Sharing 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 hash Can override the browser's back and forward buttons.
- 16. IFrame App -Authentication First hit to Iframe - Various session parameters as request parameters 2 ways to continue: Pass parameters to all the internal links Dummy 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.
- 17.
- 18. FQL - Enhancements batch.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.
- 19. More ... Track everything. - GA provides event tracking how many people accepted the app conversion of people from newsfeed, notifications and invites. viral coefficient Notifications/Invites - limit per user track number of notifications and invites sent track hideall/spam reports When building a node using xfbml, prefer parseDomElement over parseDomTree
- 20. Web Optimizations JS optimizations Event delegation Optimize queries dojo.query("[attr='xyz']") == bad bad CSS optimizations avoid inefficient key selectors. STOP IE6 SUPPORT! http://www.stopie6.com/
- 21.