Your SlideShare is downloading. ×
0
Introduction to

facebook JavaScript SDK
!

Tutorials & Code Lab, 2013 Winter
Colin Su
Social Network Application

faceboo...
http://goo.gl/MwcsRA

facebook JavaScript SDK
Colin Su
>

littleq0903+sna@gmail.com

>

Software Engineer @ Tagtoo

>

National Chengchi University

http://about.me/lit...
Before We Start…
>

Google Moderator: http://goo.gl/OVNszf

Ask question here!

>

Code Lab Repo: https://github.com/littl...
Outline
>

Facebook Developers Website

>

Facebook App

>

Facebook Components

>

Facebook JavaScript SDK (Software Deve...
Basic Knowledges
Chapter. 0

facebook JavaScript SDK
Facebook Developer Site
Developer Portal for Facebook App Developers

>

developers.facebook.com

>

Documentation & Tutor...
Facebook Developer Dashboard
You can see all your apps information here

facebook JavaScript SDK
Facebook App
The most basic unit for a developer on Facebook

>
>

Permissions

>
>
>
>

Insights

>
>

Developer

Faceboo...
Facebook Component
What can you do with Facebook JavaScript SDK?

>

Graph API - get data in and out of Facebook’s Social ...
Social Plugins
You know, that like button

>

Like Button

>

Activity Feed

>

Share/Send Button

>

Recommendations Box/...
facebook JavaScript SDK
Authentication
The Key to The Facebook World

>

Facebook - username and password

>

Facebook API - access token

>

Prev...
Authentication
In The Real World Example…

Not easy to destroy when stolen

Username/Password

Easy to destroy when stolen...
Graph API

Data Form of Facebook, with RESTful API 

>

Everything on Facebook forms a
graph
N

>

>

Your profile is an ob...
Graph API

Alice
Bob

Data Form of Facebook, with RESTful API 

>

Some objects will be connected with
Relations

>

You c...
Facebook Dialog
Redirect some actions, let Facebook do it!

>

Pop-up style Facebook widget

>

Examples
-

Friend Request...
Technical Details
Chapter. 1

facebook JavaScript SDK
What Can JavaScript SDK Do
>

Authentication


Server side cannot achieve this, the most important part of building Facebo...
Authentication
Workflow of Authentication

Redirect user to FB
for authorizing your
app

Facebook response
user’s access
to...
Authentication
>

FB.login()


tell Facebook it’s about time to start the authentication flow

>

FB.Event.subscribe(event,...
Graph API
>

Callback model applied

>

RESTful knowledge

facebook JavaScript SDK
Callback Model

The most important part while using other’s JS library

>
>

one of JavaScript patterns
make sure action h...
RESTful API Model
>

HTTP Method: GET, POST, DELETE, PUT…

>

GET /user/{id}


Fetch the information of the user with id {...
Graph API
A Simple GET Example

>

FB.api( graph_path , callback )

FB.api(“/me”, function(response){

console.log(respons...
Graph API
A Simple GET Example

>

FB.api( graph_path , callback )

FB.api(“/me/posts”, function(response){	
// will respo...
Graph API
A Simple POST Example

>

FB.api( graph_path , type , options , callback )

var body = 'Reading JS SDK documenta...
Social Plugins

Facebook’s Native Component on Your Website

>

out-of-box Facebook plugins

>

no programmatic stuffs

it’...
Social Plugins
Code Example

>

Insert a snippet into your HTML code

<div 	
class="fb-like"	
data-href="https://www.faceb...
Dialogs
Code Example

>

FB.ui(parameters , callback)

FB.ui({	
method: 'friends',	
id: 'brent'	
}, function(response){});...
Dialogs
Code Example

>

FB.ui(parameters , callback)

<a href=“https://www.facebook.com/dialog/friends/?	
id=brent	
&app_...
Developer Tools
Chapter. 2

facebook JavaScript SDK
Facebook Developer Tools
There are some tools to help out your development of Facebook app

>

Graph API Explorer


Examin...
Graph API Explorer
>

simulate querying/FQL

>

simulate GET/POST/DELETE request

>

filter fields

>

generate/use access t...
JavaScript Test Console

facebook JavaScript SDK
Access Token Tool
>

generate tokens easily

>

user/app tokens in one place

>

test various tokens for you app

facebook...
Code Lab
Chapter. 3

facebook JavaScript SDK
In This Code Lab
You will learn…

>

how to integrate Facebook JavaScript SDK into your project

>

how to authenticate us...
Before We Start…
Get prepared

>

Google Moderator: http://goo.gl/OVNszf

Ask question here!

>

Code Lab Repo: https://gi...
Introduction to

facebook Python SDK
!

Tutorials & Code Lab, 2013 Winter
Colin Su
Social Network Application

facebook Ja...
http://goo.gl/MwcsRA

facebook JavaScript SDK
Before We Start…
>

Code Lab Repo: https://github.com/littleq0903/fb-python-codelab

The code you will need it in the prac...
Outline
>

Web Application

>

Heroku

>

Facebook Python SDK

facebook JavaScript SDK
Web Application
Chapter. 4

facebook JavaScript SDK
Website v.s. Web Application

>

Website: display information to visitors

>

Web Application: interact with users, respon...
Web Application

>

Front End: interact with users (JavaScript)

You’ve learned.

>

Back End: deal with data (Python)

Th...
Stacks
Web Framework

Web Server

Web Interface
User

User

User

facebook JavaScript SDK
Heroku
>

Platform as a Service (PaaS)

>

Easy to setup

>

Your code is everything
http://heroku.com

facebook JavaScrip...
Workflow

The Story of a Heroku Application

Create a
Heroku
Application

Write Your
Code

Deploy to
Heroku

Test

facebook...
Technical Detail
Chapter. 5

facebook JavaScript SDK
JSON Serialization
>

JSON to Python Object mapping

>

json module

>

json.loads(str) json string -> python object

>

j...
Load

Example of JSON Serialization

import json

{u'a': [1, 2, 3, 4, 5], u'b': 2}

!

# is a string
text = '{"a": [1,2,3,...
Dump

Example of JSON Serialization

import json

{"a": [1,2,3,4,5], "b": 2}

!

# is a dictionary
data = {u'a': [1, 2, 3,...
Bottle.py
>

Web Framework

WSGI-Compatible

>

Writing functions as Request Handler

>

Only one file as library

>

http:...
Request Handler Example
Example of Bottle’s Request Handler

from bottle import Bottle

hello world

!

#create your web a...
URL Argument
Example of Bottle’s Request Handler

from bottle import Bottle

hello world

!

#create your web application
...
Access Request
Example of Bottle’s Request Handler

from bottle import Bottle
#import request function
from bottle import ...
Heroku Deployment
>

First time, run heroku login to authenticate

>

Must be a Git repository: git init

>

heroku create...
Git Remotes
>

Git's remote branch

>

Github, Heroku or your own Git
server

>

Your Repo

git push <remote> <branch>
Git...
Installing Python Libraries
How to made Heroku server install Python packages for you

>

requirement.txt


Create this fil...
Facebook Python SDK
>

access Facebook Graph

>

query with FQL

>

Operating Data with Python is easier than JavaScript

...
Documentation?
https://github.com/pythonforfacebook/facebook-sdk/blob/master/facebook.py

>

In Python, sometimes source c...
Graph API
>

facebook.GraphAPI( [access_token] )

>

access token is not necessary

facebook JavaScript SDK
Graph API Methods
>

get_object

>

put_like

>

get_connections

>

delete_object

>

fql

>

put_photo

>

put_object

f...
Get Object
Example of Facebook Python SDK

import facebook
!

token = "..."
!

graph = Facebook.GraphAPI(token)
!

me = gr...
Put Object
Example of Facebook Python SDK

!

Colin Su
3 seconds ago from Graph API
---------------------------

token = "...
FQL
>

Facebook Query Language

>

SQL-like query for Facebook data

>

support nested querying, batch querying

facebook ...
FQL Query
Example of Facebook Python SDK

import facebook
!

[{u'url': u'http://www.facebook.com/littleq0903',
u'username'...
Python SDK Code Lab
Chapter. 6

facebook JavaScript SDK
Code Lab Repository
>

littleq0903/fb-python-codelab @ Github

>

Wiki -> Code Lab Checkpoints

>

Download the sample pac...
EOF

facebook JavaScript SDK
Upcoming SlideShare
Loading in...5
×

Introduction to Facebook JavaScript & Python SDK

2,445

Published on

This is a workshop for teaching people building Facebook app with its JavaScript & Python SDK, and also included a code lab to let people do it in real

Published in: Technology, Business

Transcript of "Introduction to Facebook JavaScript & Python SDK"

  1. 1. Introduction to facebook JavaScript SDK ! Tutorials & Code Lab, 2013 Winter Colin Su Social Network Application facebook JavaScript SDK
  2. 2. http://goo.gl/MwcsRA facebook JavaScript SDK
  3. 3. Colin Su > littleq0903+sna@gmail.com > Software Engineer @ Tagtoo > National Chengchi University http://about.me/littleq facebook JavaScript SDK
  4. 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
  5. 5. Outline > Facebook Developers Website > Facebook App > Facebook Components > Facebook JavaScript SDK (Software Development Kit) > Code Lab for Facebook JavaScript SDK facebook JavaScript SDK
  6. 6. Basic Knowledges Chapter. 0 facebook JavaScript SDK
  7. 7. Facebook Developer Site Developer Portal for Facebook App Developers > developers.facebook.com > Documentation & Tutorials > Facebook Developer Apps Dashboard > Download SDK > Online Tools facebook JavaScript SDK
  8. 8. Facebook Developer Dashboard You can see all your apps information here facebook JavaScript SDK
  9. 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. 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. 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
  12. 12. facebook JavaScript SDK
  13. 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. 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. 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. 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
  17. 17. Facebook Dialog Redirect some actions, let Facebook do it! > Pop-up style Facebook widget > Examples - Friend Request Dialog - Login Dialog - Friends Dialog - Send Dialog facebook JavaScript SDK
  18. 18. Technical Details Chapter. 1 facebook JavaScript SDK
  19. 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. 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. 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
  22. 22. Graph API > Callback model applied > RESTful knowledge facebook JavaScript SDK
  23. 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. 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
  25. 25. Graph API A Simple GET Example > FB.api( graph_path , callback ) FB.api(“/me”, function(response){
 console.log(response);
 }); { "id": "1681390745", "name": "Colin Su", "first_name": "Colin", "last_name": "Su", "link": "https://www.facebook.com/littleq0903", "username": "littleq0903", "work": [ ... ], "gender": "male", "timezone": 8, "locale": "en_US", "verified": true, "updated_time": "2013-12-02T17:44:06+0000" } JavaScript Result facebook JavaScript SDK
  26. 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. 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. 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. 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
  30. 30. Dialogs Code Example > FB.ui(parameters , callback) FB.ui({ method: 'friends', id: 'brent' }, function(response){}); JavaScript Result facebook JavaScript SDK
  31. 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
  32. 32. Developer Tools Chapter. 2 facebook JavaScript SDK
  33. 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
  34. 34. Graph API Explorer > simulate querying/FQL > simulate GET/POST/DELETE request > filter fields > generate/use access token easily facebook JavaScript SDK
  35. 35. JavaScript Test Console facebook JavaScript SDK
  36. 36. Access Token Tool > generate tokens easily > user/app tokens in one place > test various tokens for you app facebook JavaScript SDK
  37. 37. Code Lab Chapter. 3 facebook JavaScript SDK
  38. 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. 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. 40. Introduction to facebook Python SDK ! Tutorials & Code Lab, 2013 Winter Colin Su Social Network Application facebook JavaScript SDK
  41. 41. http://goo.gl/MwcsRA facebook JavaScript SDK
  42. 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
  43. 43. Outline > Web Application > Heroku > Facebook Python SDK facebook JavaScript SDK
  44. 44. Web Application Chapter. 4 facebook JavaScript SDK
  45. 45. Website v.s. Web Application > Website: display information to visitors > Web Application: interact with users, response users’ various request facebook JavaScript SDK
  46. 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
  47. 47. Stacks Web Framework Web Server Web Interface User User User facebook JavaScript SDK
  48. 48. Heroku > Platform as a Service (PaaS) > Easy to setup > Your code is everything http://heroku.com facebook JavaScript SDK
  49. 49. Workflow The Story of a Heroku Application Create a Heroku Application Write Your Code Deploy to Heroku Test facebook JavaScript SDK
  50. 50. Technical Detail Chapter. 5 facebook JavaScript SDK
  51. 51. JSON Serialization > JSON to Python Object mapping > json module > json.loads(str) json string -> python object > json.dumps(obj) python object -> json string facebook JavaScript SDK
  52. 52. Load Example of JSON Serialization import json {u'a': [1, 2, 3, 4, 5], u'b': 2} ! # is a string text = '{"a": [1,2,3,4,5], "b": 2}' ! result = json.loads(text) ! print result Python Console facebook JavaScript SDK
  53. 53. Dump Example of JSON Serialization import json {"a": [1,2,3,4,5], "b": 2} ! # is a dictionary data = {u'a': [1, 2, 3, 4, 5], u'b': 2} ! result = json.dumps(data) ! print result Python Console facebook JavaScript SDK
  54. 54. Bottle.py > Web Framework
 WSGI-Compatible > Writing functions as Request Handler > Only one file as library > http://bottlepy.org
 Documentation facebook JavaScript SDK
  55. 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. 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. 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. 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. 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. 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. 61. Facebook Python SDK > access Facebook Graph > query with FQL > Operating Data with Python is easier than JavaScript facebook x facebook JavaScript SDK
  62. 62. Documentation? https://github.com/pythonforfacebook/facebook-sdk/blob/master/facebook.py > In Python, sometimes source code is the best documentation > Doc string > So does bottle.py facebook JavaScript SDK
  63. 63. Graph API > facebook.GraphAPI( [access_token] ) > access token is not necessary facebook JavaScript SDK
  64. 64. Graph API Methods > get_object > put_like > get_connections > delete_object > fql > put_photo > put_object facebook JavaScript SDK
  65. 65. Get Object Example of Facebook Python SDK import facebook ! token = "..." ! graph = Facebook.GraphAPI(token) ! me = graph.get_object('me') ! print me Python {u'first_name': u'Colin', u'gender': u'male', u'id': u'1681390745', u'last_name': u'Su', u'link': u'https://www.facebook.com/littleq0903', u'locale': u'en_US', u'name': u'Colin Su', u'timezone': 8, u'updated_time': u'2013-12-05T15:31:10+0000', u'username': u'littleq0903', u'verified': True, u'work': [{u'employer': {u'id': u'240616999424812', u'name': u'Tagtoo u5854u5716u79d1u6280'}, u'location': {u'id': u'110765362279102', u'name': u'Taipei, Taiwan'}, u'position': {u'id': u'109542932398298', u'name': u'Software Engineer'}, u'start_date': u'2013-09-30'}, {u'employer': {u'id': u'454607821247176', u'name': u'g0v.tw u53f0u7063u96f6u6642u653fu5e9c'}}]} Console facebook JavaScript SDK
  66. 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
  67. 67. FQL > Facebook Query Language > SQL-like query for Facebook data > support nested querying, batch querying facebook JavaScript SDK
  68. 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
  69. 69. Python SDK Code Lab Chapter. 6 facebook JavaScript SDK
  70. 70. Code Lab Repository > littleq0903/fb-python-codelab @ Github > Wiki -> Code Lab Checkpoints > Download the sample package facebook JavaScript SDK
  71. 71. EOF facebook JavaScript SDK
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×