introduction to facebook javascript sdk
TRANSCRIPT
Facebook JavaScript SDK
Facebook JavaScript SDKYi-Fan Chu, 2016
Social Network ApplicationDepartment of Computer Science, University of Taipei
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…
Facebook JavaScript SDK
1.65 Billion
Facebook JavaScript SDK
1.Essential Knowledge
2.Technical Details
3.Implementation
3 parts of today…
Facebook JavaScript SDK
Essential KnowledgePart 1 of 3
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
Facebook JavaScript SDK
App Dashboard
Documents
SDKs
Developer Tools
Facebook Developers WebsiteThe 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 JavaScript SDKFacebook DevelopersCreate your Facebook App here!
https://developers.facebook.com
Facebook JavaScript SDKApp DashboardControl your Facebook App here!
Facebook JavaScript SDKSDKsWe will utilize JavaScript SDK today.
Facebook JavaScript SDKDeveloper ToolsTools to help you to develop Facebook App.
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
Facebook JavaScript SDK
Website: present information to users
Web App: interact with users
Website v.s Web App
Facebook JavaScript SDK
Facebook AppWhat could Facebook do for us?
Login Share Analytics
Monetization Messenger
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…
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
Facebook JavaScript SDK
Application Programming Interface
Software Development Kit
Integrated Development Environment
API v.s. SDK v.s. IDELet’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.
Facebook JavaScript SDKAPIsAll kinds of APIs..
Map API REST API Data.Taipei
Data API Fusion API
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
Facebook JavaScript SDK
Authentication
Load the products of Facebook
Use the functions of Facebook API
JavaScript SDKWhat 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.
Facebook JavaScript SDK
Access TokenThe Key of Authentication.
User clicked “login with Facebook” in your app.
User Authenticatesthrough typing
username and password
Your App requestsaccess and permissionsvia SDK and login dialog
Your App receivesthe access tokenfrom Facebook
SDK gets authorized,your app can access
to Facebook API
Facebook JavaScript SDK
App
1.loginwith fb
www.tvbizz.net
2.request
3.logindialog
4.accept
5.access token
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
Facebook JavaScript SDK
Facebook Login
Sharing
Social Plugins
ProductsWhat you can do with Facebook SDK.
Facebook JavaScript SDK
Like Button
Share Button
Send Button
Follow Button
Social PluginsThere are some components Facebook had build for you. Just take it.
Comment
Embedded Video
Embedded Posts
Page Plugin
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
Facebook JavaScript SDK
Nodes
Edges
Fields
Graph APIThe 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.
Facebook JavaScript SDK
“What a beautiful day!”
“WTH is FB JS SDK!?”
“I wanna drop the course!”
Friends
Posts
Name Work Birthday
Music
Photos
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
Facebook JavaScript SDK
Technical DetailsPart 2 of 3
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
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
Facebook JavaScript SDKDownload JavaScript SDK
Self called function
fbAsyncInitis called.
Don’t forget to change the App ID.
Facebook JavaScript SDK
FB.Event.subscribe( event, callback);
FB.getLoginStatus( callback);
In JavaScript SDK…
Facebook JavaScript SDK
Callback Function
function jobcallback
Result/data
argument
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
Facebook JavaScript SDK
1.Use the login button
2.Call the login function
LoginThere’re two ways to login.
Facebook JavaScript SDK
Just like using Bootstrap, assign a specific class
1.Login Button
Facebook JavaScript SDK
Several attributes of the login button are available in the documents.
1.Login Button
Facebook JavaScript SDK
What are the two ways to login FB?
Fun time
Facebook JavaScript SDK
Call the function “FB.login()”, for instance :
2.Login Function
Facebook JavaScript SDK
FB.login(callback)
2.Login Function
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
Facebook JavaScript SDK
What is callback function?
Fun time
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
Facebook JavaScript SDK
FB.ui(parameters, callback)
Sharing
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
Facebook JavaScript SDK
Like button
Social Plugin
Facebook JavaScript SDK
ImplementationPart 3 of 3
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
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 environmentThe goal of checkpoint 1 is to..
Facebook JavaScript SDKCreate a Heroku Accounthttps://www.heroku.com/home
Sign up for free
Facebook JavaScript SDKCreate a Heroku Accounthttps://www.heroku.com/home
2.Choose Python
3.Create Free Account
1.Enter yourName and Email
Facebook JavaScript SDKCreate a Heroku AccountCheck your email to comfirm.
2.Click the link to confirm
1.Check your email
Facebook JavaScript SDKCreate a Heroku AccountSet your password for Heroku.
Facebook JavaScript SDKCreate a Heroku AccountCongrats! Your account is set.
Facebook JavaScript SDKCreate an App on HerokuStop here first…
Don’t leave the page…Let’s go to FB dev.
Facebook JavaScript SDKOpen your iTerm2.iterm2 is a useful terminal app.
Facebook JavaScript SDKCreate an App on HerokuWe 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
Facebook JavaScript SDKCreate an App on HerokuWe utilize the template heroku gived us.
Your first project is born!!
Facebook JavaScript SDKLogin Heroku.Use the email you created Heroku account.
Facebook JavaScript SDKGo to myproject/cd myproject
Facebook JavaScript SDKCreate an App on Heroku.heroku create u10x160xx
App URL
Facebook JavaScript SDKGit commit.commit the first version of your project.
Facebook JavaScript SDKSet Heroku as a git repository.heroku git:remote -a u10x160xx
Facebook JavaScript SDKPush your project to Heroku.git push heroku master
Facebook JavaScript SDKNice work!Your Django project is running on Heroku.
https://u10x160xx.herokuapp.com/
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 DjangoThe goal of checkpoint 2 is to..
Facebook JavaScript SDKOpen Sublime Text 2.
Mac: Press f4
Facebook JavaScript SDKDrag your project in Sublime.
drag into Sublime.
Facebook JavaScript SDKIf Side Bar didn’t show..View/ Side Bar/ Show Side Bar
Facebook JavaScript SDKOpen your iTerm.Set your iTerm and Sublime like this…
Mac : “cmd” + “=”to enlarge font size
Facebook JavaScript SDKpython manage.py startapp myappCreate an app in your project
Facebook JavaScript SDKCreate 2 new folders in myapp.
Facebook JavaScript SDKCmyapp/templates/ & myapp/static/Create 2 new folders in myapp.
Facebook JavaScript SDKCstatic/js/ & static/images/ & static/css/Create 3 new folders in static.
Facebook JavaScript SDKCtemplates/myapp/Create a new folders in templates.
Facebook JavaScript SDKCreate index.htmlmyapp/ index.html
2.save the file(command + s)
1.create a new file
index.html
Facebook JavaScript SDKCheck your folder structure…It’s complicated…
Facebook JavaScript SDKCopy the file on Github.
https://github.com/tom8u4286/index/blob/master/index.html
copy the file(command + c)
Facebook JavaScript SDKPaste into index.htmltemplates/ myapp/ index.html
1.Paste into index.html(command + v)
2.Save(command + s)
Facebook JavaScript SDKadd “myapp” in settings.pymyproject/ settings.py
1.Find INSTALLED_APPS in settings.py
2.Add a string ‘myapp’
3.Save (command + s)
Facebook JavaScript SDKRender a viewmyapp/ views.py
1.Add a function index() in myapp/ views.py
2.Save (command + s)
Facebook JavaScript SDKSet the URL in urls.pymyproject/ urls.py
1.Import views in myapp/
2.Set the root url to views.index
3.Save (command + s)
Facebook JavaScript SDKPush your project to Heroku.
Facebook JavaScript SDKWhat is the problem?The CSS file has not been loaded..
Facebook JavaScript SDKCreate index.cssmyapp/ static/ css/ index.css
2.save the file(command + s)
1.create a new file
index.css
Facebook JavaScript SDK
https://github.com/tom8u4286/index/blob/master/index.css
copy the file(command + c)
Copy the file on Github.
Facebook JavaScript SDKmyapp/ static/ css/ index.css
1.Paste into index.html(command + v)
Paste into index.css
2.Save (command + s)
Facebook JavaScript SDKLoad the static files in htmltemplates/ myapp/ index.html
1.load the static files in index.html
2.set the source of css file.
3.Save (command + s)
Facebook JavaScript SDKSave 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.htmlLoad the static files in html
1.set the source of image file.
2.Save (command + s)
Facebook JavaScript SDKPush your project to Heroku.
Facebook JavaScript SDKYour static html is working on Django.Nice work!
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 DjangoThe goal of checkpoint 3 is to..
Facebook JavaScript SDKCreate a model called “Post”.myapp/ models.py
Facebook JavaScript SDKDo them both in local and on heroku.Makemigrations and migrate.
Facebook JavaScript SDK
2.save the file(command + s)
1.create forms.py in myapp/
forms.py
Create forms.pymyapp/ forms.py
Facebook JavaScript SDKCreate AddPost to get forms.myapp/ forms.py
Facebook JavaScript SDKSet the views if we get requestmyapp/ views.py
2.import the classes we created
1.Go to myapp/ views.py
Facebook JavaScript SDKSet the views if we get requestmyapp/ views.py
1.Add a condition if we got POST request
Scroll down
2.Save (command + s)
Facebook JavaScript SDKPush your project to Heroku.
Facebook JavaScript SDKMakemigrations and migrate.
Facebook JavaScript SDKTry to post something..
Try to post something…
Facebook JavaScript SDKWhat?We still need to add something in index.html…
Facebook JavaScript SDKtemplates/ index.htmlAdd the tags and push again.
1.Go to index.html
2.Add the csrf tags
4.Push again
3.Save file
Facebook JavaScript SDKThe posts didn’t appear…We need to fix something in views and index.
???
Facebook JavaScript SDKRender the posts in views.pymyapp/ views.py
1.Go to myapp/views.py
2.Add post_list
3.Save file
Facebook JavaScript SDKtemplates/ myapp/ index.htmlAdd 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
Facebook JavaScript SDKYour posts appeared.Nice work!
Facebook JavaScript SDK
Load the FB SDK into your app.
Create an app on Facebook dev.
Set the user profile picture.
4.Facebook loginThe goal of checkpoint 4 is to..
Facebook JavaScript SDKCopy the code in FB dev.
https://developers.facebook.com/docs/javascript/quickstart
Facebook JavaScript SDKtemplates/ myapp/ index.htmlPaste into index.html
2.Important! Directly after the opening <body> tag
1.Go to templates/ myapp/ index.html
3.Save (command + s)
Facebook JavaScript SDKCreate an App on FB dev.https://developers.facebook.com
Login with Facebook.
Facebook JavaScript SDKCreate an App on FB dev.Add a new App in your Facebook dev account.
Add a New App.
Facebook JavaScript SDKCreate an App on FB dev.Add a new App in your Facebook dev account.
1.Name for your app.e.g. sna2016
3.CategoryApp for Pages
2.Set your email.
4.Create App ID
Facebook JavaScript SDKCreate an App on FB dev.May have some security check…
Facebook JavaScript SDKCreate an App on FB dev.Go to the dashboard of your app.
Click Dashboard.
Facebook JavaScript SDKCopy the App IDIt’s in the Dashboard of your FB app.
Facebook JavaScript SDKAssign the id to an var.templates/ myapp/ index.html
Facebook JavaScript SDKGet the profile picture.templates/ myapp/ index.html
Scroll down
Bigger screen shot in next page..
Facebook JavaScript SDK
Facebook JavaScript SDKWe call the func after FB init.
Scroll up
templates/ myapp/ index.html
Facebook JavaScript SDKloginCheck function…
Scroll down
Bigger screen shot in next page..
templates/ myapp/ index.html
Facebook JavaScript SDKCW
Facebook JavaScript SDKCall the loginCheck()
Scroll down
templates/ myapp/ index.html
Facebook JavaScript SDKPush your project to Heroku.
Facebook JavaScript SDKSet 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
Facebook JavaScript SDKNice work!
Facebook JavaScript SDK
Sharing button.
Load user friends in facebook.
5.Sharing and friend listThe goal of checkpoint 5 is to..
Facebook JavaScript SDKAdd a sharing function.templates/ myapp/ index.html
Scroll down
Facebook JavaScript SDKPush your project to Heroku.
Facebook JavaScript SDKMNice work!
Facebook JavaScript SDKIn window.fbloaded, add an api call
Bigger screen shot in next page..
templates/ myapp/ index.html
Facebook JavaScript SDK
Facebook JavaScript SDKIn loginCheck, add a scope.templates/ myapp/ index.html
Facebook JavaScript SDKMake your app public.
1.App Review
2.Turn on.
Facebook JavaScript SDK
Facebook JavaScript SDKAsk a friend to login!
Facebook JavaScript SDK
Don’t give up! Keep going!
You have more potential than you think.
One last thing…
Facebook JavaScript SDK
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