• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building an interactive timeline from facebook photos
 

Building an interactive timeline from facebook photos

on

  • 1,371 views

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 ...

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.

Statistics

Views

Total Views
1,371
Views on SlideShare
1,340
Embed Views
31

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 31

http://www.linkedin.com 30
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building an interactive timeline from facebook photos Building an interactive timeline from facebook photos Presentation Transcript

    • Building an interactive timeline from facebook photos Rakesh Rajan & Pranav Bhasin July 25, 2009
    • Agenda 1. Intro and Demo 2. Evolution 3. Challenges 4. Best Practices
    • 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
    • DEMO!
    • Evolution
    • Facebook: Connect v/s App
    • 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
    • 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 hashes FB 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 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.  
    • 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.    
    • Good Practices
    • 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.  
    • 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    
    • 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/    
    • Questions?