Writing a Facebook App

1
Writing a Facebook App

• James Winters
• james_at_jghd.co.uk

2
Agenda

• How Facebook apps work
• Getting Started
• Code Demo

3
Anatomy of a Facebook Page
Left Navigation
Canvas
Dashboard
News Feeds and Stories
4
Facebook apps

• Two distinct types
• IFrame
• Simply serves up page in iFrame
• Can only access Canvas Pages
• Will have to work hard to get same look and feel
• FBML
• Markup Language geared to facebook
• Allows you to add to profile
• Facebook calls back to your app
• You emit FBML

5
Architecture

• RESTful interface
• Simple HTTP GET/POST
• Returns XML or JSON
• Two Modes

Facebook Server
IFrame
FBML
Your Server
6
Getting Started

• You need
• To register with facebook ?
• Need to add developer application
• http//www.facebook.com/developers
• Need to register application and get API key and
  secret
• A toolkit to wrap facebook API
• You could write your own
• But you probably shouldnt
• http//www.codeplex.com/FacebookToolkit
• Official MS toolkit
• http//www.codeplex.com/FacebookNET
• A more recent open source offering
• A good idea
• Especially if you want users to use it

7
Facebook API

• Geared to Social Interaction
• Auth
• Friends
• Groups
• Events
• Feed
• Marketplace
• Photos
• Users
• Pages
• Easiest way to learn API is to head to the API
  Test Console
• http//developers.facebook.com/tools.php?api

8
FBML

• Set of tags that allow you to interact with
  Facebook
• Very restricted subset of HTML
• All that is allowed in Profile
• To test FBML go to http//developers.facebook.com/
  tools.php?fbml
• For FBML docs go to
• http//wiki.developers.facebook.com/index.php/FBML
  

9
Parameters

• Parameters are posted in Form
• As hidden fields
• fb_sig_user indicatesuser has logged on
• fb is reserved
• Dont start your form fieldswith this

fb_sig_in_canvas fb_sig_time fb_sig_added fb_sig_u
ser fb_sig_profile_update_time fb_sig_session_key
fb_sig_expires fb_sig_friends fb_sig_api_key fb_si
g ids
10
FQL

• Every framework needs a Query Language ?
• Tables and columns are fairly self explanatory
• See http//developers.facebook.com/documentation.p
  hp?docfql

SELECT name, pic FROM user WHERE uid211031 OR
uid4801660
11
IFrame

• Straightforward, the IFrame is simply hosted in
  the canvas
• You are responsible for look and feel
• You can use flash, silverlight etc.
• Consider using fbsilverlight or other container
• You can use AJAX
• FBML supports mock AJAX
• Easier to debug

12
Summary and Resources

• Simple Restful API
• Lots of Gotchas
• And its poorly documented, just to add to the
  fun ?
• Hardest decision
• FBML or IFrame?
• Start with IFrame, you can embed this in a FBML
  app using fbiframe
• Steve Trefethens Starter Kits
• http//www.stevetrefethen.com/blog/CategoryView,ca
  tegory,Facebook.aspx
• My Blog
• http//www.wintersfamily.plus.com/blogs/JamesWinte
  rs/