Building an interactive timeline from facebook photos

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

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

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.

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/

Building an interactive timeline from facebook photos

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building an interactive timeline from facebook photos

Similar to Building an interactive timeline from facebook photos (20)

Building an interactive timeline from facebook photos