Building Applications on

Facebook Platform

David Zhuang

Entrepreneur’s Playfield

Overview

Open Distribution to Millions of Users

Capabilities / Integration Points

Architecture

Components

Resources

Open Distribution

Build It, And They Are Already There • Developers: Equal Footing with Organizations

Platform Is Completely Open

Automated Viral Distribution Engine: News Feed

New Model for Entrepreneurs• Experiment: Low Investment (Time/Money)• If It Works, Ramp up

Capabilities / Integration Points1. Product Directory2. About3. Left Nav4. Facebook Canvas Pages

a. Homeb. User Dashboardc. Settings

5. Profilea. Profile Boxb. Profile Action Links

6. Privacy Settings7. News Feed8. Alerts9. Message Attachments10.Requests

Canvas: Embedded Application

Left Nav

Canvas

Home Page: Viral Distribution

Left Nav

News Feed

Profile: Viral Distribution

Left Nav

News Feed

ProfileBox

Architecture: Traditional Web App

Web/AppServer

Database

1. HTTPRequest

2. HTMLResponse

SQL Query Data

Your Server

Architecture: Facebook App - Canvas

Web/App Server

Database

1. HTTP

6. HTML

SQL Query Data

Your Server

Facebook Server

2. HTTP / REST

3. API/FQL

4. API Rsp

5. FBML

0. API/FBML(Pushed Separately)

Architecture: Facebook App - Profile

Web/App Server

Database

1. HTTP

2. HTML

SQL Query Data

Your Server

Facebook Server

Components

API• Web Service API• Client Library:

• Official: PHP, Java• Unofficial: Perl, Python, Ruby, VB.NET, and others

FQL• Similar to SQL• Access to user profile, friend, group, event, and photo

FBML• Similar to HTML• Subset of HTML + Proprietary Extensions

API

Web Service API: Well Documented API Client Library

• Mostly Covered by Web Service API Documentation • For the Rest, Read Code (Only 2 Files)

• facebook.php• facebookapi_php5_restlib.php

Access Facebook User Data• Profile, Friends, Group, Event, Photo, etc.

Update User Views• Profile, Feed, etc.

API Client Lib Function Examples

$facebook->redirect($url)

$facebook->require_login() / $facebook->require_add()

$facebook->get_login_url() / $facebook->get_add_url()

$facebook->api_client->feed_publishStoryToUser($title, $body, ...)

$facebook->api_client->friends_get()

$facebook->api_client->friends_getAppUsers()

$facebook->api_client->groups_get ($uid=null, $gids=null)

$facebook->api_client->profile_setFBML($markup, $uid=null)

FQL

Very Similar to SQL• Select From One Table At a Time, No Join• Query Must Be Indexable

Access Facebook Database Tables• user, friend, group, group_member, event,

event_member, photo, album, photo_tag

FBML

A Subset of HTML• Excluded: <script>• Limited: <style> (internal CSS only)• Cached: <img>• Hidden Fields Added (For Security): <form>

Proprietary Extensions• Markup Tags: UI Elements• Procedural Tags: Control Program Flow

Mock Ajax

FBML Tags Example: Markup Tags

Code:<fb:dashboard>

<fb:action href="new.php">Create a new photo album</fb:action>

<fb:action href="you.php">Photos of You</fb:action>

</fb:dashboard>

Preview:

FBML Tags Example: Procedural Tags

Code:

<fb:if-can-see uid="12345" what="profile">     You're allowed to see 12345's profile, chum!         <fb:else>         No profile for you!     </fb:else> </fb:if-can-see>

Resources

Facebook Platform Documentation• Anatomy of a Facebook Application• Step-to-Step Guide to Creating an Application

Facebook Platform Wiki• Getting Started Guide• Basic Application Architecture

Facebook Developer Forum• Get Your Questions Answered

Success Factors

Product Definition• Social in Nature• Unsatisfied Needs

Product Design/Development• Need a Hacker in Your Team: Non-Trivial Project

Scalability Plan• Much Shorter Ramp-up Time

Monetization Strategy You Need a Team!

Contact Info

David Zhuang

david@topicalmedia.com