Intro to the Facebook API

1
Intro to the Facebook API

• Olmo Maldonado
• CS259

2
Outline

• Requirements
• Basic Application Architecture
• Facebook API Anatomy
• Creating an Application
• Managing Your Application
• Additionals

3
Requirements

• Server that serves HTML
• Contain the client libraries
• Optional Database

4
Basic Application Architecture

• For Callback Pages

5
Basic Application Architecture

• For Profile Pages

6
Facebook API Anatomy
Dashboard
Left Nav
Canvas Page (your page)
App Link
7
Facebook API Anatomy Cont.
Profile Box
Profile Actions
8
Facebook API Anatomy

• News Feed
• Alerts
• Message Attachments
• Requests
• Application Directory
• About Page

News Feed
9
Creating an Application
10
New Application Form
11
Application Name

• Gotcha Cannot have the word face

12
Callback URL

• This is the directory where the application is
  hosted on your server
• This is a page a logged-in user are redirected
• This is the home page (typically) for your
  application

13
Callback Page (Canvas Page)

• Various Authentication mechanism are used
• Facebook automatically provides in POST state
  properties that can be used
• fb_sig_added, fb_sig_in_canvas, fb_sig_user,
  fb_sig_friends,
• For maintaining session use the session_key
  provided by facebook
• facebook new Facebook(api_key,
  secret) session_key md5(facebook-gtapi_clien
  t-gtsession_key) session_id(session_key) sessi
  on_start()

14
Canvas Page URL

• This is one of the many interfaces that Facebook
  provides for the integration of applications
• Select Rendering Engine of Canvas Page as FBML or
  iframe

15
FBML vs iframe

• FBML Advantageous
• Off-load work basic cloud computing?
• Look and feel of Native Facebook
• FBML Disadvantageous
• Hard to code-share between normal site and
  Facebook version
• Limited JavaScript-based interactions
• No longer as true. FBJS and modified ltscriptgt
  allowed in Canvas and Profile Box

16
Facebook JavaScript (FBJS)

• DOM
• Events
• AJAX
• Dialogs
• Animation
• FBML Blocks

• obj.setStyle(color 'black', background
  'white')
• var element document.getElementById('foo')
• element.addEventListener('mouseover',myEventHandl
  er)
• var queryParams "param1" value1, "param2"
  value2
• ajax.post("http//example.com/testajax.php",
  queryParams)
• new Dialog().showMessage('Dialog', 'Hello
  World.')
• var element document.getElementById(my_anchor)
  
• var anim Animation(element).to('background',
  'ffff4b')
• anim.to('color', '00a000').duration(2000).go()

17
Application Type

• Website option allows integration into Facebook
• Desktop options forwards the user into an
  external site
• The Application can still be placed in the
  Directory, however

18
Mobile Integration

• ltfbmobilegt tags will only be rendered in
  m.facebook.com
• POST Parameter sb_sig_mobile set to display a
  mobile or regular canvas
• FBJS and Mock AJAX are not available
• Adds presense to Facebook's XHTML website
  (m.facebook.com)
• Profile boxes and canvas pages
• Applications can leverage Facebook's SMS services
  to interact with users via text messages
• Various Policies
• opt-in/out
• throttling
• single to many messages not allowed

• API
• user generated
• Text message in the form of app_canvas_name
  ltquerygt to 32665 which is forwarded to the
  application if session
• session timeout of 1 minute
• Application generated
• Workflow
• Notification
• Conversation
• User Quer
• Installation

19
Can Your Application be Added

• Adds Options to your Application
• Installation Options
• Integration Options

20
Application Installation Options

• Users
• Post-Add URL, typically your canvas page URL
• Post-Remove URL, can be useful for tracking and
  maintenance
• Wide or Narrow Default Profile Box Column

21
Application Integration Options Side Nav and
Privacy URL

• Side Nav URL
• Typically your Callback page (Home page)
• Privacy URL
• Web page to edit application privacy settings

22
Application Integration Options Attachment

• Action text to display
• ie Attach a video
• URL Actions url
• ie http//www.yourserver.com/attach.php
• Gotcha input tags require nameurl and
  value. set to the url for the input
• ltinput name"url" type"radio" value"http//yours
  erver.com/attach.php?actionchoice1" /gt
• ltinput name"url" type"radio" value"http//yours
  erver.com/attach.php?actionchoice2" /gt
• ltinput name"url" type"hidden"
  value"http//yourserver.com/facebook/attach.php"
  /gt

23
Whats Next?

• After submitting
• Youll be redirected to your applications admin
  page
• Click on example code! to verify correctness and
  to add your application to your account
• Follow the instructions

24
Managing Your Applications

• Editing Application Settings
• Editing Application Details (About Page)
• Viewing

25
Additionals

• Debugging FBML can be improved by setting the
  EnableDebugging property to true
• ltfbFacebookApplication ID"fbApplication"
  runat"server" Mode"Fbml" ApplicationName"helloW
  orldFbmlApp" EnableDebugging"true" /gt
• Test Accounts
• Create a new facebook account and go to
• http//facebook.com/developers/become_test_account
  .php
• For additional emails http//www.mailexpire.com/
• Gotcha Test Account cannot own an application
• Additional Information http//wiki.developers.fac
  ebook.com/index.php/Test_Accounts

26
Facebook Query Language (FQL)

• SQL-style interface to easily query Facebook
  social data
• Can be tested at http//developers.facebook.com/t
  ools.php
• Example
• query 'SELECT name FROM group WHERE gid IN
  (SELECT gid FROM group_member WHERE uid
  userid)'
• array facebook-gtapi_client-gtfql_query(query)
  
• Example
• query ltltltQUERY
• SELECT pid
• FROM photo
• WHERE aid IN ( SELECT aid
• FROM album
• WHERE owner''user_id''
  
• )
• ORDER BY created DESC
• LIMIT 1,42
• ltltltQUERY
• array facebook-gtapi_client-gtfql_query(
  query)

27
FQL Tables

• album
• cookies
• daily_metrics
• event
• event_member
• friend
• friend_request
• friendlist
• friendlist_member

• group
• group_member
• listing
• page
• page_fan
• photo
• photo_tag
• user