Introduction to facebook javascript sdk

Facebook JavaScript SDK
Yi-Fan Chu, 2016
Social Network Application
Department of Computer Science, University of Taipei

You’ve learned something related before…
It’s not so hard as you think!
We got some fun time later :)
Goal: Let your users login by Facebook.
Before we start…

1.65 Billion

1.Essential Knowledge
2.Technical Details
3.Implementation
3 parts of today…

Essential Knowledge
Part 1 of 3

Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge

App Dashboard
Documents
SDKs
Developer Tools
Facebook Developers Website
The most important support while developing Facebook App.
Manage your app and see all your App info here.
Right place, right kit. Use the right SDK corresponding to your platform.
Tutorials and details of SDK and API.
There are some tools to help you develop Facebook App.

Facebook Developers
Create your Facebook App here!
https://developers.facebook.com

App Dashboard
Control your Facebook App here!

SDKs
We will utilize JavaScript SDK today.

Developer Tools
Tools to help you to develop Facebook App.

Website: present information to users
Web App: interact with users
Website v.s Web App

Facebook App
What could Facebook do for us?
Login Share Analytics
Monetization Messenger

Account Creation
Personalization
Social
Facebook App
Login your App with a single click, and the account is cross-platform.
You could access to the personal information of your users, e.g. name, email, gender..
Let you know who are the users that are also friends in Facebook.
The beneﬁts you get when you create a Facebook App.
Liked, birthday, hometown, location…

Application Programming Interface
Software Development Kit
Integrated Development Environment
API v.s. SDK v.s. IDE
Let’s ﬁgure out what these abbreviations are…
Many tools are included in SDK. Different platform, different SDk.
We need Facebook JavaScript SDK to develop a web Facebook App.
A library of functions and methods.
You don’t need to know how it works, but you have to know how to call them.
Usually includes code editor, debugger, compiler.

APIs
All kinds of APIs..
Map API REST API Data.Taipei
Data API Fusion API

What’s the difference between “Website” and
“Web App”?
What’s API, SDK, and IDE?
Find a partner and try to explain to him/her.
Fun time

Authentication
Load the products of Facebook
Use the functions of Facebook API
JavaScript SDK
What can Facebook SDK do for you?
Get permission to access to API. It’s the essential part to rock up your App.
Just like using “Bootstrap”, there’re several plugins you could load into your App.
Ready-made functions are available, just call them.

Access Token
The Key of Authentication.
User clicked “login with
Facebook” in your app.
User Authenticates
through typing
username and password
Your App requests
access and permissions
via SDK and login dialog
Your App receives
the access token
from Facebook
SDK gets authorized,
your app can access
to Facebook API

App
1.login
with fb
www.tvbizz.net
2.request
3.login
dialog
4.accept
5.access token

What is an access token?
What are the ﬁve steps of getting access
token?
Find a partner and try to explain to him/her.
Fun Time

Facebook Login
Sharing
Social Plugins
Products
What you can do with Facebook SDK.

Like Button
Share Button
Send Button
Follow Button
Social Plugins
There are some components Facebook had build for you. Just take it.
Comment
Embedded Video
Embedded Posts
Page Plugin

Nodes
Edges
Fields
Graph API
The primary way for apps to read and write to the Facebook social graph.
Every “object” in Facebook is a node, such as user, group, page, and photo.
Connection or relationship of “object”, such as User’s friend, Page’s photo.
Properties of “object”, such as name, birthday, work, gender of a person.

“What a beautiful
day!”
“WTH is
FB JS SDK!?”
“I wanna drop
the course!”
Friends
Posts
Name Work
Birthday
Music
Photos

What are the three components of Graph API?
What’s the basic concepts of Graph API?
Find a partner and try to explain what is
Graph API.
Fun Time

Technical Details
Part 2 of 3

Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details

No standalone ﬁle need to be installed
Include the snippet of code in your App
Insert it directly after the opening <body>
Remember : This is the ﬁrst step of everything!
Download JavaScript SDK

Download JavaScript SDK
Self called function
fbAsyncInit
is called.
Don’t forget to
change the App ID.

FB.Event.subscribe( event, callback);
FB.getLoginStatus( callback);
In JavaScript SDK…

Callback Function
function jobcallback
Result/data
argument

1.Use the login button
2.Call the login function
Login
There’re two ways to login.

Just like using Bootstrap, assign a speciﬁc class
1.Login Button

Several attributes of the login button are
available in the documents.
1.Login Button

What are the two ways to login FB?
Fun time

Call the function “FB.login()”, for instance :
2.Login Function

FB.login(callback)
2.Login Function

FB.api(graph_path, callback)
Graph API

What is callback function?
Fun time

FB.ui(parameters, callback)
Sharing

Like button
Social Plugin

Implementation
Part 3 of 3

Checkpoint 1: Setup your environment
Checkpoint 2: Set static ﬁle into Django
Checkpoint 3: Using database in Django
Checkpoint 4: Facebook login
Checkpoint 5: Sharing and friend list
Implementation

Install pip. (already installed in G509)
Install Django. (already installed in G509)
Install Heroku CLI. (already installed in G509)
Create a new account in Heroku.
Build the app on Heroku.
1.Set up environment
The goal of checkpoint 1 is to..

Create a Heroku Account
https://www.heroku.com/home
Sign up for free

https://www.heroku.com/home
2.Choose Python
3.Create Free Account
1.Enter your
Name and Email

Check your email to comﬁrm.
2.Click the link to conﬁrm
1.Check your email

Set your password for Heroku.

Congrats! Your account is set.

Create an App on Heroku
Stop here ﬁrst…
Don’t leave the page…
Let’s go to FB dev.

Open your iTerm2.
iterm2 is a useful terminal app.

We utilize the template heroku gived us.
cd Desktop1.go to Desktop
2. download the
template
django-admin.py startproject --template=https://github.com/heroku/heroku-django-template/archive/master.zip --name=Procfile myproject

We utilize the template heroku gived us.
Your ﬁrst project is born!!

Login Heroku.
Use the email you created Heroku account.

Go to myproject/
cd myproject

Create an App on Heroku.
heroku create u10x160xx
App URL

Git commit.
commit the ﬁrst version of your project.

Set Heroku as a git repository.
heroku git:remote -a u10x160xx

Push your project to Heroku.
git push heroku master

Nice work!
Your Django project is running on Heroku.
https://u10x160xx.herokuapp.com/

Set up your Sublime and iTerm.
Put your static html into Django.
Push your project to Heroku by git.
2.Set static ﬁle into Django

Open Sublime Text 2.
Mac: Press f4

Drag your project in Sublime.
drag into Sublime.

If Side Bar didn’t show..
View/ Side Bar/ Show Side Bar

Open your iTerm.
Set your iTerm and Sublime like this…
Mac : “cmd” + “=”
to enlarge font size

Facebook JavaScript SDKpython manage.py startapp myapp
Create an app in your project

Create 2 new folders in myapp.

C
myapp/templates/ & myapp/static/
Create 2 new folders in myapp.

C
static/js/ & static/images/ & static/css/
Create 3 new folders in static.

C
templates/myapp/
Create a new folders in templates.

Create index.html
myapp/ index.html
2.save the ﬁle
(command + s)
1.create a new ﬁle
index.html

Check your folder structure…
It’s complicated…

Copy the ﬁle on Github.
https://github.com/tom8u4286/index/blob/master/index.html
copy the ﬁle
(command + c)

Paste into index.html
templates/ myapp/ index.html
1.Paste into index.html
(command + v)
2.Save
(command + s)

add “myapp” in settings.py
myproject/ settings.py
1.Find INSTALLED_APPS in settings.py
2.Add a string ‘myapp’
3.Save (command + s)

Render a view
myapp/ views.py
1.Add a function index() in myapp/ views.py

Set the URL in urls.py
myproject/ urls.py
1.Import views in myapp/
2.Set the root url to views.index

Push your project to Heroku.

What is the problem?
The CSS ﬁle has not been loaded..

Create index.css
myapp/ static/ css/ index.css
2.save the ﬁle
(command + s)
1.create a new ﬁle
index.css

https://github.com/tom8u4286/index/blob/master/index.css
copy the ﬁle
(command + c)
Copy the ﬁle on Github.

Facebook JavaScript SDKmyapp/ static/ css/ index.css
1.Paste into index.html
(command + v)
Paste into index.css

Load the static files in html
1.load the static files in index.html
2.set the source of css file.

Save the img from Github.
https://github.com/tom8u4286/index/blob/master/logo.png

Facebook JavaScript SDKmyapp/ static/ images/ logo.png
safe in: myapp/static/images/
Save the img from Github.

Facebook JavaScript SDKtemplates/ myapp/ index.html
Load the static ﬁles in html
1.set the source of image ﬁle.

Facebook JavaScript SDKYour static html is working on Django.
Nice work!

Set the schema in models.py
Migrate the database both in local and heroku
Get the html form by form.py
Show the posts in your app.
3.Using database in Django

Create a model called “Post”.
myapp/ models.py

Facebook JavaScript SDKDo them both in local and on heroku.
Makemigrations and migrate.

2.save the ﬁle
(command + s)
1.create forms.py in myapp/
forms.py
Create forms.py
myapp/ forms.py

Create AddPost to get forms.
myapp/ forms.py

Set the views if we get request
myapp/ views.py
2.import the classes we created
1.Go to myapp/ views.py

Set the views if we get request
myapp/ views.py
1.Add a condition if we got POST request
Scroll down

Makemigrations and migrate.

Try to post something..
Try to post something…

What?
We still need to add something in index.html…

Facebook JavaScript SDKtemplates/ index.html
Add the tags and push again.
1.Go to index.html
2.Add the csrf tags
4.Push again
3.Save ﬁle

The posts didn’t appear…
We need to ﬁx something in views and index.
???

Render the posts in views.py
myapp/ views.py
1.Go to myapp/views.py
2.Add post_list
3.Save ﬁle

Add the tags and push again.
1.Go to templates/ myapp/ index.html
2.Render the posts by Django tags
4.Push again

Facebook JavaScript SDKYour posts appeared.
Nice work!

Load the FB SDK into your app.
Create an app on Facebook dev.
Set the user proﬁle picture.
4.Facebook login

Copy the code in FB dev.
https://developers.facebook.com/docs/javascript/quickstart

Paste into index.html
2.Important!
Directly after the opening <body> tag
1.Go to templates/ myapp/ index.html

Create an App on FB dev.
https://developers.facebook.com
Login with Facebook.

Add a new App in your Facebook dev account.
Add a New App.

Add a new App in your Facebook dev account.
1.Name for your app.
e.g. sna2016
3.Category
App for Pages
2.Set your email.
4.Create App ID

May have some security check…

Go to the dashboard of your app.
Click Dashboard.

Copy the App ID
It’s in the Dashboard of your FB app.

Assign the id to an var.

Get the proﬁle picture.
Scroll down
Bigger screen shot in next page..

We call the func after FB init.
Scroll up

loginCheck function…
Scroll down

Call the loginCheck()
Scroll down

Set your url in the dashboard.
2.Go to Settings/ Basic
1.Go back to your app Dashboard
3.Copy and paste your url
4.Save Changes

Nice work!

Sharing button.
Load user friends in facebook.
5.Sharing and friend list

Add a sharing function.
Scroll down

Facebook JavaScript SDKM
Nice work!

In window.fbloaded, add an api call

In loginCheck, add a scope.

Make your app public.
1.App Review
2.Turn on.

Ask a friend to login!

Don’t give up! Keep going!
You have more potential than you think.
One last thing…

http://www.slideshare.net/littleq0903/
introduction-to-facebook-javascript-sdk-28815523
https://github.com/littleq0903/fb-js-codelab
LittleQ Koi Leon FlyC API
Denffer Mobile Dictionary
Reference

Introduction to facebook javascript sdk

More Related Content

What's hot (17)

Viewers also liked (20)

Similar to Introduction to facebook javascript sdk (20)

Recently uploaded (20)

Introduction to facebook javascript sdk