This document provides an outline for a tutorial on the facebook JavaScript SDK. It introduces the SDK and covers the following topics:
- An overview of the Facebook developer site, apps, components, and authentication process
- Technical details of the SDK, including how to use the Graph API, callbacks, and RESTful API model
- Facebook developer tools like the Graph API explorer and access token tool
- A code lab section that provides examples of integrating the SDK, authenticating users, accessing the Graph API, and using social plugins and dialogs
4. Before We Start…
>
Google Moderator: http://goo.gl/OVNszf
Ask question here!
>
Code Lab Repo: https://github.com/littleq0903/fb-js-codelab
The code you will need it in the practice, check out the Wiki!
>
Turn your smartphone to the vibrating mode
facebook JavaScript SDK
9. Facebook App
The most basic unit for a developer on Facebook
>
>
Permissions
>
>
>
>
Insights
>
>
Developer
Facebook
App
Developer
Alert
>
>
>
>
Settings
>
>
Access Token
App ID
API Keys
Request Permissions
Developer Roles
Daily Report
Active User Statistic
Sharing Report
Breaking Changes
New Updates
Review Status
Domain Settings
Testing
Go to Production
facebook JavaScript SDK
10. Facebook Component
What can you do with Facebook JavaScript SDK?
>
Graph API - get data in and out of Facebook’s Social Graph
>
Login - authenticate Facebook users on your website
>
Social Plugins - don’t rebuild the wheel, take the power from
Facebook
facebook JavaScript SDK
11. Social Plugins
You know, that like button
>
Like Button
>
Activity Feed
>
Share/Send Button
>
Recommendations Box/Bar
>
Embedded Posts
>
Like Box
>
Follow Button
>
Registration
>
Comments
>
Facepile
facebook JavaScript SDK
13. Authentication
The Key to The Facebook World
>
Facebook - username and password
>
Facebook API - access token
>
Preventing server gets your credentials directly
facebook JavaScript SDK
14. Authentication
In The Real World Example…
Not easy to destroy when stolen
Username/Password
Easy to destroy when stolen
Access Token
facebook JavaScript SDK
15. Graph API
Data Form of Facebook, with RESTful API
>
Everything on Facebook forms a
graph
N
>
>
Your profile is an object, and has a
bunch of properties
Every object will have an ID as the
identity
am
e
y
thda
Bir
Me
Work
Ge
E-m
ail
nd
er
facebook JavaScript SDK
16. Graph API
Alice
Bob
Data Form of Facebook, with RESTful API
>
Some objects will be connected with
Relations
>
You could fetch more data on
Facebook through the relations
Friends
Photos
Me
Posts
“Today I go to…
“Damn, I hate
school…
facebook JavaScript SDK
19. What Can JavaScript SDK Do
>
Authentication
Server side cannot achieve this, the most important part of building Facebook apps
>
Interact with your website users
the thing could be done by ONLY JavaScript
>
Load Facebook pre-defined components
like buttons, comments, registration form in a second
>
Pre-defined functions from Facebook
out-of-box APIs and don’t rebuild the wheel
facebook JavaScript SDK
20. Authentication
Workflow of Authentication
Redirect user to FB
for authorizing your
app
Facebook response
user’s access
token to your
function
user type username &
password to login and
authorize
Rock it up!
JS SDK gets authorized
and feedback on the
interface or program
facebook JavaScript SDK
21. Authentication
>
FB.login()
tell Facebook it’s about time to start the authentication flow
>
FB.Event.subscribe(event, callback)
tell Facebook what to do when user got logged in
facebook JavaScript SDK
23. Callback Model
The most important part while using other’s JS library
>
>
one of JavaScript patterns
make sure action has been done
function
callback
Data
Could
you plz do this for
me?
Arguments
I’ve done, here
you go!
Job
Okay! I will tell callback
when I finished
facebook JavaScript SDK
24. RESTful API Model
>
HTTP Method: GET, POST, DELETE, PUT…
>
GET /user/{id}
Fetch the information of the user with id {id}
>
POST /user
Create a user
>
DELETE /user/{id}
Delete the user with id {id}
facebook JavaScript SDK
26. Graph API
A Simple GET Example
>
FB.api( graph_path , callback )
FB.api(“/me/posts”, function(response){
// will response an array in “data”
console.log(response);
});
{
"data": [
{post},
{post},
{post},
{post},
{post}
]
}
JavaScript
Result
facebook JavaScript SDK
27. Graph API
A Simple POST Example
>
FB.api( graph_path , type , options , callback )
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body },
function(response) {
if (!response || response.error) {
console.log(‘Error occured');
} else {
console.log(‘Post ID: ' + response.id);
}
});
JavaScript
Post ID: 6892345
Result
facebook JavaScript SDK
28. Social Plugins
Facebook’s Native Component on Your Website
>
out-of-box Facebook plugins
>
no programmatic stuffs
it’s just a piece of HTML snippet
>
configure it by adjusting DOM
attributes
facebook JavaScript SDK
29. Social Plugins
Code Example
>
Insert a snippet into your HTML code
<div
class="fb-like"
data-href="https://www.facebook.com">
</div>
HTML
Result
facebook JavaScript SDK
31. Dialogs
Code Example
>
FB.ui(parameters , callback)
<a href=“https://www.facebook.com/dialog/friends/?
id=brent
&app_id=458358780877780
&redirect_uri=https://mightylowlands-6381.herokuapp.com/“>Add Brent as Friend</
a>
HTML
Add Brent as Friend
Result
facebook JavaScript SDK
33. Facebook Developer Tools
There are some tools to help out your development of Facebook app
>
Graph API Explorer
Examine the result of Graph API queries
>
JavaScript Test Console
Verify your JavaScript code’s validation and examine the result
>
Access Token Tool
For generating access tokens, for streamline your testing
facebook JavaScript SDK
38. In This Code Lab
You will learn…
>
how to integrate Facebook JavaScript SDK into your project
>
how to authenticate user’s Facebook account
>
how to access Graph API with users’ credentials
>
how to place a Facebook cool widget on your page
>
how to use Facebook dialog to save your time
facebook JavaScript SDK
39. Before We Start…
Get prepared
>
Google Moderator: http://goo.gl/OVNszf
Ask question here!
>
Code Lab Repo: https://github.com/littleq0903/fb-js-codelab
The code you will need it in the practice, check out the Wiki!
>
Download the CodeLab pack
https://github.com/littleq0903/fb-js-codelab/releases/download/v1.0/fb-js-codelab.tgz
>
Ready your editor, web browser, and passion!
facebook JavaScript SDK
40. Introduction to
facebook Python SDK
!
Tutorials & Code Lab, 2013 Winter
Colin Su
Social Network Application
facebook JavaScript SDK
42. Before We Start…
>
Code Lab Repo: https://github.com/littleq0903/fb-python-codelab
The code you will need it in the practice, check out the Wiki!
>
Turn your smartphone to the vibrating mode
facebook JavaScript SDK
45. Website v.s. Web Application
>
Website: display information to visitors
>
Web Application: interact with users, response users’ various
request
facebook JavaScript SDK
46. Web Application
>
Front End: interact with users (JavaScript)
You’ve learned.
>
Back End: deal with data (Python)
The part related to this presentation
facebook JavaScript SDK
55. Request Handler Example
Example of Bottle’s Request Handler
from bottle import Bottle
hello world
!
#create your web application
app = Bottle()
!
#define a function and point to /index
@app.route('/index')
def index():
return 'hello world'
Python
/index
facebook JavaScript SDK
56. URL Argument
Example of Bottle’s Request Handler
from bottle import Bottle
hello world
!
#create your web application
app = Bottle()
!
# <name> will be the 'name' argument in the
function
@app.route('/index/<name>')
def index(name='default'):
return "hello " + name
Python
/index/world
facebook JavaScript SDK
57. Access Request
Example of Bottle’s Request Handler
from bottle import Bottle
#import request function
from bottle import request
<LocalRequest: GET http://localhost:8080/index>
!
#create your web application
app = Bottle()
!
#define a function and point to /index
@app.route('/index')
def index():
return request
Python
/index
facebook JavaScript SDK
58. Heroku Deployment
>
First time, run heroku login to authenticate
>
Must be a Git repository: git init
>
heroku create
Create a Heroku app and add it to git remotes
>
heroku config:set var1=val1 var2=val2
Set Environment Variables on Heroku
>
git push heroku master
Deploy
facebook JavaScript SDK
59. Git Remotes
>
Git's remote branch
>
Github, Heroku or your own Git
server
>
Your Repo
git push <remote> <branch>
Github
Heroku
facebook JavaScript SDK
60. Installing Python Libraries
How to made Heroku server install Python packages for you
>
requirement.txt
Create this file and put it under the root folder
>
one package per line
>
<package name>
>
<package name>==<version>
>
(local) pip install -r ./requirements.txt
facebook JavaScript SDK
61. Facebook Python SDK
>
access Facebook Graph
>
query with FQL
>
Operating Data with Python is easier than JavaScript
facebook
x
facebook JavaScript SDK
66. Put Object
Example of Facebook Python SDK
!
Colin Su
3 seconds ago from Graph API
---------------------------
token = "..."
!
!
I'm testing api
!
import facebook
msg = "I'm testing api"
!
graph = Facebook.GraphAPI(token)
!
graph.put_object('me', 'feed', message=msg)
--------------------------Like . Comment . Promote . Share
--------------------------Obama and Mark Zurgerburg like this.
--------------------------Someone lalalalala
5 seconds ago . Like
!
Somebody ?
10 seconds ago . Like
!
!
Python
Facebook
facebook JavaScript SDK
68. FQL Query
Example of Facebook Python SDK
import facebook
!
[{u'url': u'http://www.facebook.com/littleq0903',
u'username': u'littleq0903', u'name': u'Colin Su'}]
token = "..."
!
graph = Facebook.GraphAPI(token)
!
# me() is the built-in function for returning
your id
query = "SELECT name,url,username FROM profile
WHERE id = me()"
!
print graph.fql(query)
Python
Console
facebook JavaScript SDK