Models Call Girls Shettihalli - 7001305949 Escorts Service 50% Off with Cash ...
Introduction to facebook java script sdk
1. Facebook JavaScript SDK
Facebook JavaScript SDK
Yi-Fan Chu, 2015
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 :)
Get comfy :) Let’s roll out!
Before we start…
6. Facebook JavaScript SDK
App Dashboard
Documents
SDKs
Developer Tools
https://developers.facebook.com
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.
11. 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.
13. 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.
15. 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
16. 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.
17. Facebook JavaScript SDK
Access Token
The Key of Authentication.
Your App requests
access and permissions
via SDK and login dialog
Your App receives
the access token
from Facebook
User Authenticates
through typing
username and password
SDK gets authorized,
your app can access
to Facebook API
Let’s roll out!
19. 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
21. 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.
22. Facebook JavaScript SDK
“What a beautiful
day!”
“WTH is
FB JS SDK!?”
“I wanna drop
the course!”
Friends
Posts
Name Work
Birthday
Music
Photos
23. 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
26. 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
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
54. Facebook JavaScript SDK
Create a new App in Facebook Dev.
Create a new workspace in Cloud 9.
Assign the domain name to Facebook Dev and
assign the App Id to your app.
Setup
The goal of checkpoint 1 is to..
81. Facebook JavaScript SDK
Setup
There is nothing to copy~ Code on your own :)
1.index.html
3.In the script tag,
define a function initCheck();
2.Scroll down
85. Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
86. Facebook JavaScript SDK
Define a button to trigger login and logout.
Call FB.getLoginStatus() & FB.Event.Subscribe()
to check if a user is login.
Call FB.login() and FB.logout();
In this part, practice to code by your own :)
Login
The goal of checkpoint 2 is to ..
87. Facebook JavaScript SDK
Login
We’d like to know if the login/out event was fired.
2.In the script tag,
define a function fbloaded();
Try to code on your own :)
1.Scroll down
88. Facebook JavaScript SDK
Login
To ensure SDK is loaded, the best way is to call it right after init.
2.Call it after FB.init().
1.Scroll up
93. Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
94. Facebook JavaScript SDK
Define a img and h1 tag to display picture
and name.
Call Graph API by FB.api();
Practice to code by your own :)
Fetch profile picture and name
The goal of checkpoint 3 is to ..
96. Facebook JavaScript SDK
Fetch picture and name
The picture would be loaded to the img tag.
2.Define a img and h1 tag.
1.Scroll up
97. Facebook JavaScript SDK
Fetch picture and name
Use Graph API to fetch profile picture and name.
2.In FB.Event.subscribe()
Call FB.api()
We’d like to show the picture
and name when a user login.
1.Scroll down
3.Save (command + s)
98. Facebook JavaScript SDK
Fetch picture and name
Good job! Very happy to see yourself, right?
Refresh the page
and see what happened :)
99. Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
100. Facebook JavaScript SDK
Define a share button to trigger share event.
Call FB dialog by FB.ui();
Try to code by yourself :)
Sharing and Comment
The goal of checkpoint 4 is to ..
103. Facebook JavaScript SDK
Sharing and Comment
Using the Facebook sharing dialog.
2.Define a function sharing()
Call the FB.ui();
3.Copy your App’s URL and
paste here.
1.Scroll down
104. Facebook JavaScript SDK
Sharing and Comment
Click to trigger the sharing function.
Call sharing()
when the button is clicked.
105. Facebook JavaScript SDK
Sharing and Comment
Embed the Facebook comment.
2.Define a div with a class attribute “fb-comments”.
3.Copy your App’s URL and
paste here.
4.Save (command + s)
1.Scroll up