1. Facebook JavaScript SDK
Facebook JavaScript SDK
Yi-Fan Chu, 2016
Social Network Application
Department of Computer Science, University of Taipei
2. Facebook JavaScript SDK
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…
7. Facebook JavaScript SDK
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.
15. Facebook JavaScript SDK
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 benefits you get when you create a Facebook App.
Liked, birthday, hometown, location…
17. Facebook JavaScript SDK
Application Programming Interface
Software Development Kit
Integrated Development Environment
API v.s. SDK v.s. IDE
Let’s figure 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.
19. Facebook JavaScript SDK
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
20. Facebook JavaScript SDK
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.
21. Facebook JavaScript SDK
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
23. Facebook JavaScript SDK
What is an access token?
What are the five steps of getting access
token?
Find a partner and try to explain to him/her.
Fun Time
25. Facebook JavaScript 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
27. Facebook JavaScript SDK
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.
28. Facebook JavaScript SDK
“What a beautiful
day!”
“WTH is
FB JS SDK!?”
“I wanna drop
the course!”
Friends
Posts
Name Work
Birthday
Music
Photos
29. Facebook JavaScript SDK
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
32. Facebook JavaScript SDK
No standalone file need to be installed
Include the snippet of code in your App
Insert it directly after the opening <body>
Remember : This is the first step of everything!
Download JavaScript SDK
53. Facebook JavaScript SDK
Checkpoint 1: Setup your environment
Checkpoint 2: Set static file into Django
Checkpoint 3: Using database in Django
Checkpoint 4: Facebook login
Checkpoint 5: Sharing and friend list
Implementation
54. Facebook JavaScript SDK
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..
62. Facebook JavaScript SDK
Create an App on Heroku
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
71. Facebook JavaScript SDK
Set up your Sublime and iTerm.
Put your static html into Django.
Push your project to Heroku by git.
2.Set static file into Django
The goal of checkpoint 2 is to..
92. Facebook JavaScript SDKmyapp/ static/ css/ index.css
1.Paste into index.html
(command + v)
Paste into index.css
2.Save (command + s)
93. Facebook JavaScript SDK
Load the static files in html
templates/ myapp/ index.html
1.load the static files in index.html
2.set the source of css file.
3.Save (command + s)
99. Facebook JavaScript SDK
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
The goal of checkpoint 3 is to..
113. Facebook JavaScript SDKtemplates/ myapp/ index.html
Add the tags and push again.
1.Go to templates/ myapp/ index.html
2.Render the posts by Django tags
3.Save (command + s)
4.Push again
115. Facebook JavaScript SDK
Load the FB SDK into your app.
Create an app on Facebook dev.
Set the user profile picture.
4.Facebook login
The goal of checkpoint 4 is to..
117. Facebook JavaScript SDKtemplates/ myapp/ index.html
Paste into index.html
2.Important!
Directly after the opening <body> tag
1.Go to templates/ myapp/ index.html
3.Save (command + s)
120. Facebook JavaScript SDK
Create an App on FB dev.
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
132. Facebook JavaScript SDK
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