building an interactive timeline from facebook photos

21
Building an interactive timeline from facebook photos Rakesh Rajan & Pranav Bhasin July 25, 2009

Upload: rakesh-rajan

Post on 17-May-2015

1.258 views

Category:

Documents


1 download

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.

TRANSCRIPT

Page 1: Building an interactive timeline from facebook photos

Building an interactive timeline from facebook photos

Rakesh Rajan & Pranav Bhasin

July 25, 2009

Page 2: Building an interactive timeline from facebook photos

Agenda1. Intro and Demo2. Evolution3. Challenges 4. Best Practices

Page 3: Building an interactive timeline from facebook photos

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

DEMO!

Page 5: Building an interactive timeline from facebook photos

Evolution

Page 6: Building an interactive timeline from facebook photos

Facebook: Connect v/s App

Page 7: Building an interactive timeline from facebook photos

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

Facebook: IFrame v/s Canvas

Speed 

Appearance 

URLs  

Authentication

Page 9: Building an interactive timeline from facebook photos

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

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

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

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

Architecture

Page 14: Building an interactive timeline from facebook photos

Issues

Page 15: Building an interactive timeline from facebook photos

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

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

Good Practices

Page 18: Building an interactive timeline from facebook photos

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

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

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

Questions?