Intro Facebook JS SDK - Build Social Apps Tutorial & Code Lab

Introduction to

facebook JavaScript SDK
!

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


http://goo.gl/MwcsRA


Colin Su
>

littleq0903+sna@gmail.com

>

Software Engineer @ Tagtoo

>

National Chengchi University

http://about.me/littleq

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


Outline
>

Facebook Developers Website

>

Facebook App

>

Facebook Components

>

Facebook JavaScript SDK (Software Development Kit)

>

Code Lab for Facebook JavaScript SDK


Basic Knowledges
Chapter. 0


Facebook Developer Site
Developer Portal for Facebook App Developers

>

developers.facebook.com

>

Documentation & Tutorials

>

Facebook Developer Apps Dashboard

>

Download SDK

>

Online Tools


Facebook Developer Dashboard
You can see all your apps information here


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 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


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


Authentication
The Key to The Facebook World

>

Facebook - username and password

>

Facebook API - access token

>

Preventing server gets your credentials directly


Authentication
In The Real World Example…

Not easy to destroy when stolen

Username/Password

Easy to destroy when stolen

Access Token


Graph API

Data Form of Facebook, with RESTful API

>

Everything on Facebook forms a
graph
N

>

>

Your proﬁle 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


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 Dialog
Redirect some actions, let Facebook do it!

>

Pop-up style Facebook widget

>

Examples
-

Friend Request Dialog

-

Login Dialog

-

Friends Dialog

-

Send Dialog


Technical Details
Chapter. 1


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-deﬁned components 
like buttons, comments, registration form in a second

>

Pre-deﬁned functions from Facebook 
out-of-box APIs and don’t rebuild the wheel


Authentication
Workﬂow 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


Authentication
>

FB.login() 

tell Facebook it’s about time to start the authentication ﬂow

>

FB.Event.subscribe(event, callback) 
tell Facebook what to do when user got logged in


Graph API
>

Callback model applied

>

RESTful knowledge


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 ﬁnished


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}


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


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


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


Social Plugins

Facebook’s Native Component on Your Website

>

out-of-box Facebook plugins

>

no programmatic stuﬀs 
it’s just a piece of HTML snippet

>

conﬁgure it by adjusting DOM
attributes


Social Plugins
Code Example

>

Insert a snippet into your HTML code

<div
class="fb-like"
data-href="https://www.facebook.com">
</div>

HTML

Result


Dialogs
Code Example

>

FB.ui(parameters , callback)

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

JavaScript

Result


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


Developer Tools
Chapter. 2


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


Graph API Explorer
>

simulate querying/FQL

>

simulate GET/POST/DELETE request

>

ﬁlter ﬁelds

>

generate/use access token easily


JavaScript Test Console


Access Token Tool
>

generate tokens easily

>

user/app tokens in one place

>

test various tokens for you app


Code Lab
Chapter. 3


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


Before We Start…
Get prepared

>

Google Moderator: http://goo.gl/OVNszf 
Ask question here!

>

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

>

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!


Introduction to

facebook Python SDK
!

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


Before We Start…
>

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

>

Turn your smartphone to the vibrating mode


Outline
>

Web Application

>

Heroku

>

Facebook Python SDK


Web Application
Chapter. 4


Website v.s. Web Application

>

Website: display information to visitors

>

Web Application: interact with users, response users’ various
request


Web Application

>

Front End: interact with users (JavaScript) 
You’ve learned.

>

Back End: deal with data (Python) 
The part related to this presentation


Stacks
Web Framework

Web Server

Web Interface
User

User

User


Heroku
>

Platform as a Service (PaaS)

>

Easy to setup

>

Your code is everything
http://heroku.com


Workﬂow

The Story of a Heroku Application

Create a
Heroku
Application

Write Your
Code

Deploy to
Heroku

Test


Technical Detail
Chapter. 5


JSON Serialization
>

JSON to Python Object mapping

>

json module

>

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

>

json.dumps(obj) python object -> json string


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


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


Bottle.py
>

Web Framework 
WSGI-Compatible

>

Writing functions as Request Handler

>

Only one ﬁle as library

>

http://bottlepy.org 
Documentation


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


URL Argument


hello world

!

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


Access Request

#import request function
from bottle import request

<LocalRequest: GET http://localhost:8080/index>

!

app = Bottle()
!

#define a function and point to /index
@app.route('/index')
def index():
return request

Python

/index


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


Git Remotes
>

Git's remote branch

>

Github, Heroku or your own Git
server

>

Your Repo

git push <remote> <branch>
Github

Heroku


Installing Python Libraries
How to made Heroku server install Python packages for you

>

requirement.txt 

Create this ﬁle and put it under the root folder

>

one package per line

>

<package name>

>

<package name>==<version>

>

(local) pip install -r ./requirements.txt


Facebook Python SDK
>

access Facebook Graph

>

query with FQL

>

Operating Data with Python is easier than JavaScript

facebook

x

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


Graph API
>

facebook.GraphAPI( [access_token] )

>

access token is not necessary


Graph API Methods
>

get_object

>

put_like

>

get_connections

>

delete_object

>

fql

>

put_photo

>

put_object


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


Put Object

!

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

token = "..."

!

!

I'm testing api
!

import facebook

msg = "I'm testing api"
!

!

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


FQL
>

Facebook Query Language

>

SQL-like query for Facebook data

>

support nested querying, batch querying


FQL Query

import facebook
!

[{u'url': u'http://www.facebook.com/littleq0903',
u'username': u'littleq0903', u'name': u'Colin Su'}]

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


Python SDK Code Lab
Chapter. 6


Code Lab Repository
>

littleq0903/fb-python-codelab @ Github

>

Wiki -> Code Lab Checkpoints

>

Download the sample package


Intro Facebook JS SDK - Build Social Apps Tutorial & Code Lab

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Intro Facebook JS SDK - Build Social Apps Tutorial & Code Lab

Similar a Intro Facebook JS SDK - Build Social Apps Tutorial & Code Lab (20)

Más de Colin Su

Más de Colin Su (20)

Último

Último (20)

Intro Facebook JS SDK - Build Social Apps Tutorial & Code Lab