Introduction to facebook java script sdk

Facebook JavaScript SDK
Yi-Fan Chu, 2015
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 :)
Get comfy :) Let’s roll out!
Before we start…

1.Essential Knowledge
2.Technical Details
3.Implementation
Things we’ll learn today

Essential Knowledge
Part 1 of 3

Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge

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.

Facebook Developers
Create your Facebook App here!

App Dashboard
Control your Facebook App here!

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

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.

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.

API v.s. SDK v.s. IDE
API SDK IDE
In some cases..

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

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.

https://developers.facebook.com/docs/javascript/quickstart/v2.5
1.Docs
2.Web SDKs/ JavaScript SDK/ Quickstart

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

Callback Function
function jobcallback
argument
Data

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

https://developers.facebook.com/docs/facebook-login/web/login-
button
1.Docs
2.Facebook Login
3.Web/ 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

https://developers.facebook.com/docs/facebook-login/web
1.Docs
2.Facebook Login
3.Web
4.Invoking the login dialog
with the Javascript SDK

FB.api(graph_path, callback)
Graph API

https://developers.facebook.com/docs/graph-api/using-graph-api/v2.5
2.APIs and SDKs
3.Using the Graph API
1.Docs

What is callback function?
Fun time

FB.ui(parameters, callback)
Sharing

https://developers.facebook.com/docs/sharing/reference/share-
dialog
1.Docs2.Sharing
3.Web
4.Share Dialog

Like button
Social Plugin

https://developers.facebook.com/docs/plugins/like-
button
1.Docs
2.Social Plugin
4.Get Code
3.like button

Implementation
Part 3 of 3

Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch proﬁle picture and name
Checkpoint 4: Sharing and Comment
Implementation

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

Setup
Add a New App
Choose “My Apps” and “Add a New app”.
https://developers.facebook.com/

Setup
Choose “Website”.
Website

Setup
Adding a name in the blank (e.g. example).
1.example
2.Create New Facebook App ID

Setup
Choose a category and click create button.
3.Create App ID
1.No! Don’t touch it.
2.Category
App for Pages

Setup
Skip the quick start.
Skip Quick Start

Setup
Go to the setting section.
Go to Settings

Setup
Wait here. Let’s go to Cloud 9.
Don’t leave this page and
open a new tab to Cloud 9.

Setup
In cloud 9, create a new Workspace.

Setup
Add a workspace name and choose “HTML5”.
1.my-ﬁrst-app
2.HTML5
3.create workspace

Setup
Clone the sample code from Github via git.
git clone https://github.com/tom8u4286/fb-js-sdk-practice.git

Setup
You’ll see these ﬁle loaded in your workspace.

Setup
“index.html” will be your coding playground today.
index.html

Setup
Run the Apache server.
Run/ Run with/ Apache httpd(PHP,HTML)

Setup
This would be the URL of your App.
Copy this URL Without this dot.
Please be careful!

Setup
Add a platform in your App settings.
Add Platform

Setup
Choose “Website” for your web app.
Website

Setup
Your App URL should be put here.
Paste your URL to
“App Domains” and “Site URL”

Save Changes
Because it’s very important, it has to be said 3 times..
1.Save Changes
2.Save Changes
3.Save Changes

1.Docs
3.Web SDKs/ JavaScript SDK/ Quickstart
4.Scroll down
Setup
Download JS SDK, a snippet of code, remember?
2.APIs and SDKs

Setup
Copy the code. ( command + c )
Copy the snippet of code

Setup
The ﬁrst step of everything, remember?
Paste the code
after the opening <body>

Setup
Beautify your code.
To beautify your code in cloud 9:
command + shift + B (mac)
Ctrl + shift + B (windows)

Setup
Change the argument in function “fbAsyncInit”.
Change the appId to
“FacebookAppId”
(mind the capital letters)

Setup
Go to the App dashboard.
Go to the dashboard

Setup
Copy the App Id and paste in your code.
Copy the App ID

Setup
Paste the App Id in the App_Id.js ﬁle.
1.App_Id.js 2.Paste the App ID
Mind the quotation mark!

Setup
There is nothing to copy～ Code on your own :)
1.index.html
3.In the script tag,
deﬁne a function initCheck();
2.Scroll down

Setup
Then call it right after FB init.
2.In the fbAsyncInit(),
call the function initCheck();
1.Scroll up

Setup
See if you initialization successful:)
2.In Appache Runner
console
3.LEFT click the URL
1.Save (command + s)

Setup
Congratulations! You’ve just set up JS SDK.

Deﬁne 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 ..

Login
We’d like to know if the login/out event was ﬁred.
deﬁne a function fbloaded();
Try to code on your own :)
1.Scroll down

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

Login
It’s very simple, so try to code by yourself :)
2.Deﬁne a login button.
1.Scroll down

Login
Practice makes perfect :)
deﬁne a function loginCheck();
Try to code on your own :)
1.Scroll down

Login
Deﬁne a event listener.
1.In the script,
call the loginCheck()
when the button is clicked.

Login
Well done! You’ve just learned how to login!
Reload the page and try to login :)

Deﬁne a img and h1 tag to display picture
and name.
Call Graph API by FB.api();
Practice to code by your own :)
Fetch proﬁle picture and name

Fetch picture and name
Logout ﬁrst.
Logout your App.

The picture would be loaded to the img tag.
2.Deﬁne a img and h1 tag.
1.Scroll up

Use Graph API to fetch proﬁle 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

Good job! Very happy to see yourself, right?
Refresh the page
and see what happened :)

Deﬁne a share button to trigger share event.
Call FB dialog by FB.ui();
Try to code by yourself :)
Sharing and Comment

Sharing and Comment
Logout ﬁrst.
Logout your App.

Sharing and Comment
This button would share your app to FB.
Deﬁne a share button.

Sharing and Comment
Using the Facebook sharing dialog.
2.Deﬁne a function sharing()
Call the FB.ui();
3.Copy your App’s URL and
paste here.
1.Scroll down

Sharing and Comment
Click to trigger the sharing function.
Call sharing()
when the button is clicked.

Sharing and Comment
Embed the Facebook comment.
2.Deﬁne a div with a class attribute “fb-comments”.
3.Copy your App’s URL and
paste here.
1.Scroll up

Sharing and Comment
Nice work! Share something to your FB :)
Remember to refresh the page :)

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 java script sdk

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Introduction to facebook java script sdk (20)

Recently uploaded (20)

Introduction to facebook java script sdk