Building Facebook apps
with django
Harish Mallipeddi
http://poundbang.in
NUS Singapore - Jan ’08
1

About me
➜ Started linuxNUS with friends.
➜ Graduated from NUS SoC recently.
➜ Work - www.circos.com
➜ Search engine startup in SFO/SG
➜ Launching on Mon at DEMO’08
➜ Linux, Apache, Postgres, Python/Django &
some secret sauce!
2

Today’s topics
➜ Facebook dev platform
➜ API
➜ FBML
➜ etc
➜ Some code (if you like?)
➜ Q&A (no rules - ask qns anytime!)
3

Facebook f8 platform
4

Facebook platform
➜ Lets third-party developers to plug into FB.
➜ Deep integration (platform > API).
➜ REST API
➜ Markup (FBML)
➜ Query (FQL)
➜ Think salesforce.com for social networking
➜ 14,376 apps as of today!
5

Integration points
➜ Application’s canvas pages
➜ User’s profile page
➜ Wide/narrow profile box
➜ Profile action link (beneath user’s avatar)
➜ Mini-newsfeed
➜ News Feed
➜ Invites, notification requests, etc
6

http://apps.facebook.com/<your_app>/
http://apps.facebook.com/superpoke/
7

8

How it works
➜ User navigates to:
http://apps.facebook.com/<your_app>/
➜ Facebook proxies request to your www (FB
terminology - “callback URL”)
➜ Your web server makes
➜ API calls to Facebook’s servers, and/or
➜ FQL queries to Facebook’s servers
9

How it works? (cont)
➜ Your web server responds
➜ Return a FBML page, or
➜ Return a page with IFrame
➜ Facebook converts FBML to plain HTML
➜ Facebook sends it back to user’s browser
10

Exceptions
➜ Profile page content has to be “pushed” to
Facebook.
➜ If you don’t, FB will use some default FBML.
➜ API call - facebook.profile.setFBML
11

Creating your first app
➜ Add the Facebook “Developer” app
➜ The “Developer” app lets you create a new
Facebook app
➜ Fill out a simple form describing your app
➜ App name
➜ App url (canvas page) http://apps.facebook.com/
twitter/
➜ Callback url - http://twitter.com/facebook/
12

Creating your first app
➜ Dev environment:
➜ You need a box with a “public IP”
➜ Set up DynDNS on your dev machine
➜ NUS hostel kids: it sucks!
➜ Pick your fav lang: Python/Ruby/Java/PHP
➜ Download a client library (pyfacebook)
➜ Handle requests from Facebook!
13

FBML
14

FBML tags
➜ Subset of regular HTML tags
➜ <div>, <b>, <img>, etc.
➜ Special Facebook tags
➜ <fb:name>, <fb:header>, <fb:dialog>
➜ http://wiki.developers.facebook.com/index.php/FBML
15

What about CSS?
➜ <style> tag is allowed but...
➜ CSS rules rewritten on-the-fly
➜ .myclass { font-weight: bold; } will become
➜ .app123456_myclass { font-weight: bold; }
➜ Linking to external CSS files disallowed.
➜ <link href=\"example.css\" rel=\"stylesheet\" type=\"text/css\" />
16

You say Javascript?
➜ I say “FBJS”
➜ <script> tag is allowed
➜ Just like CSS rules, Javascript/DOM “id”
values are rewritten on-the-fly
➜ Wrappers for making AJAX calls.
17

Sample Code?
18

Useful links
➜ FB wiki: http://wiki.developers.facebook.com/index.php/Main_Page
➜ API Docs: http://developers.facebook.com/documentation.php
➜ Django: http://www.djangoproject.com
➜ pyfacebook: http://code.google.com/p/pyfacebook/
19

if questions:
for q in questions:
answer(q)
else:
print “Thank you!”
20