Facebook Developer GarageKampala

Charlie CheeverPlatform Engineering, Facebook

Review: A Web Apppretty simple

A Facebook App - What do you Get?

• Authentication for free. Less code for you to write, less work for users to login, a realer concept of identity

• Data about the people who use your app

• names, profile pictures, interests, favorite books, favorite movies

• ... and friends

• Messaging (notifications, requests) -> Distribution

• Convenient widgets. Friend selector, mp3 player, etc.

• You can show ads on your application and keep all those revenues

Some Examples of What’s Being Done with the Facebook Platform

TechCrunch(technology blog)

TechCrunch

TechCrunch

iLike(social music)

Flixster(social movies)

Prolific(games!)

Facebook Platform Technology

•API

•FBML

Facebook API

• Read data from Facebook

• about users, ex. names, profile pictures, favorite books, favorite movies, etc.

• other data like photos, groups, events, etc.

• almost all the data that’s available on Facebook

• Messaging - sending e-mails to users, sending Facebook requests, sending Facebook notifications

• Publishing news feed stories

FBML

• Basically HTML with a few extras

• Sanitary - Safe for Facebook to display anywhere

• Makes it easy to efficiently embed social data

• Provides convenient widgets like friend selectors

How Facebook Apps Work

• Facebook Connect Applications

• FBML Canvas Applications

• IFrame Canvas Applications

• Big Question: How do we efficiently involve a third party when a user loads a webpage?

FBML Canvas Apps

FBML Canvas Apps

IFrame Canvas Apps

IFrame Canvas Apps Using XFBML

IFrame Canvas Apps

Facebook Connect Apps

Facebook

UserYour Server

1. initial request from user

4. regular response from your server

2. server-side API call to Facebook (optional)

3. server-side API response (optional)

5. JS API Call to Facebook

6. JS API response from Facebook

Facebook Connect Apps

Getting Your Feet WetSome Simple Examples

• http://apps.facebook.com/devgaragekampala/

• A Facebook app that I’ve set up that will let you test out snippets of code and get some experience with the API and FBML

Examples

• http://apps.facebook.com/devgaragekampala/

• Hello, Uganda!

• Hello, Mark Zuckerberg

• Hello friends!

• Pick a friend

• Someone Else’s Code

Setting Up A Real App

• We’ll use a free hosting service called AppJet in this example but you can use any kind of hosting.

• AppJet is a free, web-based hosting service

• Great for prototyping websites with Javascript

• Has built-in Facebook support

Your program

Preview

First Program

Remember this name.

Now we have a real

website

http://www.facebook.com/developers

Remember this Canvas URL

Congratulations! You now have a Facebook application.

Write these keys down

import("facebook");fb.init();print("Hello Kampala!");

Add the following to your app.

Type in your Canvas url

Paste in your API Key and Secret

Clicking Publish will take your

application live

Web Resources

• FB Developers Wiki: http://wiki.developers.facebook.com/

• API Test Console: http://developers.facebook.com/tools.php?api

• FBML Test Console: http://developers.facebook.com/tools.php?fbml

• AppJet (free, easy hosting): http://www.appjet.com/

• FB Developer App (for setting up an app): http://www.facebook.com/developers/

• Facebook Developer Site: http://developers.facebook.com/

Questions?

charlie@facebook.com