Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building an interactive timeline from facebook photos


Published on

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.

  • Be the first to comment

  • Be the first to like this

Building an interactive timeline from facebook photos

  1. 1. Building an interactive timeline from facebook photos Rakesh Rajan & Pranav Bhasin July 25, 2009
  2. 2. Agenda 1. Intro and Demo 2. Evolution 3. Challenges 4. Best Practices
  3. 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
  4. 4. DEMO!
  5. 5. Evolution
  6. 6. Facebook: Connect v/s App
  7. 7. Facebook: Connect v/s App 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. 8. Facebook: IFrame v/s Canvas Speed   Appearance   URLs    Authentication
  9. 9. 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=" xmlns:fb=""> 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. 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. 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. 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. 13. Architecture
  14. 14. Issues
  15. 15. IFrame URLs Urls do not change Back button breaks Sharing breaks Solution: 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. 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. 17. Good Practices
  18. 18. FQL - Enhancements - 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. 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. 20. Web Optimizations JS optimizations Event delegation Optimize queries dojo.query("[attr='xyz']") == bad bad   CSS optimizations avoid inefficient key selectors.   STOP IE6 SUPPORT!    
  21. 21. Questions?