Intro to the Facebook API - PowerPoint PPT Presentation

1 / 27
About This Presentation
Title:

Intro to the Facebook API

Description:

Creating an Application. New Application Form. Application Name ... fb:FacebookApplication ID='fbApplication' runat='server' Mode='Fbml' ... – PowerPoint PPT presentation

Number of Views:858
Avg rating:3.0/5.0
Slides: 28
Provided by: Olmo
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com