Download - Introduction to facebook java script sdk
![Page 1: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/1.jpg)
Facebook JavaScript SDK
Facebook JavaScript SDKYi-Fan Chu, 2015
Social Network ApplicationDepartment of Computer Science, University of Taipei
![Page 2: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/2.jpg)
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…
![Page 3: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/3.jpg)
Facebook JavaScript SDK
1.Essential Knowledge
2.Technical Details
3.Implementation
Things we’ll learn today
![Page 4: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/4.jpg)
Facebook JavaScript SDK
Essential KnowledgePart 1 of 3
![Page 5: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/5.jpg)
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
![Page 6: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/6.jpg)
Facebook JavaScript SDK
App Dashboard
Documents
SDKs
Developer Tools
https://developers.facebook.com
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.
![Page 7: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/7.jpg)
Facebook JavaScript SDKFacebook DevelopersCreate your Facebook App here!
![Page 8: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/8.jpg)
Facebook JavaScript SDKApp DashboardControl your Facebook App here!
![Page 9: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/9.jpg)
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
![Page 10: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/10.jpg)
Facebook JavaScript SDK
Website: present information to users
Web App: interact with users
Website v.s Web App
![Page 11: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/12.jpg)
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
![Page 13: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/13.jpg)
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.
![Page 14: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/14.jpg)
Facebook JavaScript SDK
API v.s. SDK v.s. IDE
API SDK IDE
In some cases..
![Page 15: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/17.jpg)
Facebook JavaScript SDK
Access TokenThe Key of Authentication.
Your App requestsaccess and permissionsvia SDK and login dialog
Your App receivesthe access tokenfrom Facebook
User Authenticatesthrough typing
username and password
SDK gets authorized,your app can access
to Facebook API
Let’s roll out!
![Page 18: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/18.jpg)
Facebook JavaScript SDK
Facebook Login
Sharing
Social Plugins
ProductsWhat you can do with Facebook SDK.
![Page 19: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/20.jpg)
Facebook JavaScript SDK
Facebook Developers Website
Facebook App
JavaScript SDK
Graph API
Essential Knowledge
![Page 21: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/21.jpg)
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.
![Page 22: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/22.jpg)
Facebook JavaScript SDK
“What a beautiful day!”
“WTH is FB JS SDK!?”
“I wanna drop the course!”
Friends
Posts
Name Work Birthday
Music
Photos
![Page 23: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/24.jpg)
Facebook JavaScript SDK
Technical DetailsPart 2 of 3
![Page 25: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/25.jpg)
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
![Page 26: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/27.jpg)
Facebook JavaScript SDKDownload JavaScript SDK
Self called function
fbAsyncInitis called.
Don’t forget to change the App ID.
![Page 28: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/28.jpg)
Facebook JavaScript SDKhttps://developers.facebook.com/docs/javascript/quickstart/v2.5
1.Docs
2.Web SDKs/ JavaScript SDK/ Quickstart
![Page 29: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/29.jpg)
Facebook JavaScript SDK
FB.Event.subscribe( event, callback);
FB.getLoginStatus( callback);
In JavaScript SDK…
![Page 30: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/30.jpg)
Facebook JavaScript SDK
Callback Function
function jobcallback
argument
Data
![Page 31: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/31.jpg)
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
![Page 32: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/32.jpg)
Facebook JavaScript SDK
1.Use the login button
2.Call the login function
LoginThere’re two ways to login.
![Page 33: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/33.jpg)
Facebook JavaScript SDK
Just like using Bootstrap, assign a specific class
1.Login Button
![Page 34: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/34.jpg)
Facebook JavaScript SDK
Several attributes of the login button are available in the documents.
1.Login Button
![Page 35: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/35.jpg)
Facebook JavaScript SDK
https://developers.facebook.com/docs/facebook-login/web/login-button
1.Docs
2.Facebook Login
3.Web/ Login Button
![Page 36: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/36.jpg)
Facebook JavaScript SDK
What are the two ways to login FB?
Fun time
![Page 37: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/37.jpg)
Facebook JavaScript SDK
Call the function “FB.login()”, for instance :
2.Login Function
![Page 38: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/38.jpg)
Facebook JavaScript SDK
FB.login(callback)
2.Login Function
![Page 39: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/39.jpg)
Facebook JavaScript SDKhttps://developers.facebook.com/docs/facebook-login/web
1.Docs
2.Facebook Login
3.Web
4.Invoking the login dialogwith the Javascript SDK
![Page 40: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/40.jpg)
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
![Page 41: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/41.jpg)
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
![Page 42: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/42.jpg)
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
![Page 43: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/43.jpg)
Facebook JavaScript SDK
FB.api(graph_path, callback)
Graph API
![Page 44: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/44.jpg)
Facebook JavaScript SDKhttps://developers.facebook.com/docs/graph-api/using-graph-api/v2.5
2.APIs and SDKs
3.Using the Graph API
1.Docs
![Page 45: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/45.jpg)
Facebook JavaScript SDK
What is callback function?
Fun time
![Page 46: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/46.jpg)
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
![Page 47: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/47.jpg)
Facebook JavaScript SDK
FB.ui(parameters, callback)
Sharing
![Page 48: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/48.jpg)
Facebook JavaScript SDK
https://developers.facebook.com/docs/sharing/reference/share-dialog
1.Docs2.Sharing
3.Web
4.Share Dialog
![Page 49: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/49.jpg)
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
![Page 50: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/50.jpg)
Facebook JavaScript SDK
Like button
Social Plugin
![Page 51: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/51.jpg)
Facebook JavaScript SDK
https://developers.facebook.com/docs/plugins/like-button
1.Docs2.Social Plugin
4.Get Code
3.like button
![Page 52: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/52.jpg)
Facebook JavaScript SDK
ImplementationPart 3 of 3
![Page 53: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/53.jpg)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
![Page 54: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/54.jpg)
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.
SetupThe goal of checkpoint 1 is to..
![Page 55: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/55.jpg)
Facebook JavaScript SDKSetup
Add a New App
Choose “My Apps” and “Add a New app”.
https://developers.facebook.com/
![Page 56: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/56.jpg)
Facebook JavaScript SDKSetupChoose “Website”.
Website
![Page 57: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/57.jpg)
Facebook JavaScript SDKSetupAdding a name in the blank (e.g. example).
1.example2.Create New Facebook App ID
![Page 58: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/58.jpg)
Facebook JavaScript SDKSetupChoose a category and click create button.
3.Create App ID
1.No! Don’t touch it.
2.CategoryApp for Pages
![Page 59: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/59.jpg)
Facebook JavaScript SDKSetupSkip the quick start.
Skip Quick Start
![Page 60: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/60.jpg)
Facebook JavaScript SDKSetupGo to the setting section.
Go to Settings
![Page 61: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/61.jpg)
Facebook JavaScript SDKSetupWait here. Let’s go to Cloud 9.
Don’t leave this page and open a new tab to Cloud 9.
![Page 62: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/62.jpg)
Facebook JavaScript SDKSetupIn cloud 9, create a new Workspace.
![Page 63: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/63.jpg)
Facebook JavaScript SDKSetupAdd a workspace name and choose “HTML5”.
1.my-first-app
2.HTML5
3.create workspace
![Page 64: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/64.jpg)
Facebook JavaScript SDKSetupClone the sample code from Github via git.
git clone https://github.com/tom8u4286/fb-js-sdk-practice.git
![Page 65: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/65.jpg)
Facebook JavaScript SDKSetupYou’ll see these file loaded in your workspace.
![Page 66: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/66.jpg)
Facebook JavaScript SDKSetup“index.html” will be your coding playground today.
index.html
![Page 67: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/67.jpg)
Facebook JavaScript SDKSetupRun the Apache server.
Run/ Run with/ Apache httpd(PHP,HTML)
![Page 68: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/68.jpg)
Facebook JavaScript SDKSetupThis would be the URL of your App.
Copy this URL Without this dot.Please be careful!
![Page 69: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/69.jpg)
Facebook JavaScript SDKSetupAdd a platform in your App settings.
Add Platform
![Page 70: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/70.jpg)
Facebook JavaScript SDKSetupChoose “Website” for your web app.
Website
![Page 71: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/71.jpg)
Facebook JavaScript SDKSetupYour App URL should be put here.
Paste your URL to “App Domains” and “Site URL”
![Page 72: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/72.jpg)
Facebook JavaScript SDKSave ChangesBecause it’s very important, it has to be said 3 times..
1.Save Changes2.Save Changes3.Save Changes
![Page 73: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/73.jpg)
Facebook JavaScript SDK
1.Docs
3.Web SDKs/ JavaScript SDK/ Quickstart
4.Scroll down
SetupDownload JS SDK, a snippet of code, remember?
2.APIs and SDKs
![Page 74: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/74.jpg)
Facebook JavaScript SDKSetupCopy the code. ( command + c )
Copy the snippet of code
![Page 75: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/75.jpg)
Facebook JavaScript SDKSetupThe first step of everything, remember?
Paste the codeafter the opening <body>
![Page 76: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/76.jpg)
Facebook JavaScript SDKSetupBeautify your code.
To beautify your code in cloud 9:command + shift + B (mac)Ctrl + shift + B (windows)
![Page 77: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/77.jpg)
Facebook JavaScript SDKSetupChange the argument in function “fbAsyncInit”.
Change the appId to “FacebookAppId”
(mind the capital letters)
![Page 78: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/78.jpg)
Facebook JavaScript SDKSetupGo to the App dashboard.
Go to the dashboard
![Page 79: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/79.jpg)
Facebook JavaScript SDKSetupCopy the App Id and paste in your code.
Copy the App ID
![Page 80: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/80.jpg)
Facebook JavaScript SDKSetupPaste the App Id in the App_Id.js file.
1.App_Id.js 2.Paste the App ID
Mind the quotation mark!
![Page 81: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/81.jpg)
Facebook JavaScript SDKSetupThere is nothing to copy~ Code on your own :)
1.index.html
3.In the script tag,define a function initCheck();
2.Scroll down
![Page 82: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/82.jpg)
Facebook JavaScript SDKSetupThen call it right after FB init.
2.In the fbAsyncInit(),call the function initCheck();
1.Scroll up
![Page 83: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/83.jpg)
Facebook JavaScript SDKSetupSee if you initialization successful:)
2.In Appache Runnerconsole
3.LEFT click the URL
1.Save (command + s)
![Page 84: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/84.jpg)
Facebook JavaScript SDKSetupCongratulations! You’ve just set up JS SDK.
![Page 85: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/85.jpg)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
![Page 86: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/86.jpg)
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 :)
LoginThe goal of checkpoint 2 is to ..
![Page 87: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/87.jpg)
Facebook JavaScript SDKLoginWe’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
![Page 88: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/88.jpg)
Facebook JavaScript SDKLoginTo ensure SDK is loaded, the best way is to call it right after init.
2.Call it after FB.init().
1.Scroll up
![Page 89: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/89.jpg)
Facebook JavaScript SDKLoginIt’s very simple, so try to code by yourself :)
2.Define a login button.
1.Scroll down
![Page 90: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/90.jpg)
Facebook JavaScript SDKLoginPractice makes perfect :)
2.In the script tag,define a function loginCheck();
Try to code on your own :)
1.Scroll down
![Page 91: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/91.jpg)
Facebook JavaScript SDKLoginDefine a event listener.
1.In the script,call the loginCheck()
when the button is clicked.
2.Save (command + s)
![Page 92: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/92.jpg)
Facebook JavaScript SDKLoginWell done! You’ve just learned how to login!
Reload the page and try to login :)
![Page 93: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/93.jpg)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
![Page 94: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/94.jpg)
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 nameThe goal of checkpoint 3 is to ..
![Page 95: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/95.jpg)
Facebook JavaScript SDKFetch picture and nameLogout first.
Logout your App.
![Page 96: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/96.jpg)
Facebook JavaScript SDKFetch picture and nameThe picture would be loaded to the img tag.
2.Define a img and h1 tag.
1.Scroll up
![Page 97: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/97.jpg)
Facebook JavaScript SDKFetch picture and nameUse Graph API to fetch profile picture and name.
2.In FB.Event.subscribe()Call FB.api()
We’d like to show the pictureand name when a user login.
1.Scroll down
3.Save (command + s)
![Page 98: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/98.jpg)
Facebook JavaScript SDKFetch picture and nameGood job! Very happy to see yourself, right?
Refresh the page and see what happened :)
![Page 99: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/99.jpg)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
![Page 100: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/100.jpg)
Facebook JavaScript SDK
Define a share button to trigger share event.
Call FB dialog by FB.ui();
Try to code by yourself :)
Sharing and CommentThe goal of checkpoint 4 is to ..
![Page 101: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/101.jpg)
Facebook JavaScript SDKSharing and CommentLogout first.
Logout your App.
![Page 102: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/102.jpg)
Facebook JavaScript SDKSharing and CommentThis button would share your app to FB.
Define a share button.
![Page 103: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/103.jpg)
Facebook JavaScript SDKSharing and CommentUsing the Facebook sharing dialog.
2.Define a function sharing()Call the FB.ui();
3.Copy your App’s URL andpaste here.
1.Scroll down
![Page 104: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/104.jpg)
Facebook JavaScript SDKSharing and CommentClick to trigger the sharing function.
Call sharing()when the button is clicked.
![Page 105: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/105.jpg)
Facebook JavaScript SDKSharing and CommentEmbed the Facebook comment.
2.Define a div with a class attribute “fb-comments”.
3.Copy your App’s URL andpaste here.
4.Save (command + s)
1.Scroll up
![Page 106: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/106.jpg)
Facebook JavaScript SDKSharing and CommentNice work! Share something to your FB :)
Remember to refresh the page :)
![Page 107: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/107.jpg)
Facebook JavaScript SDK
Don’t give up! Keep going!
You have more potential than you think.
One last thing…
![Page 108: Introduction to facebook java script sdk](https://reader034.vdocument.in/reader034/viewer/2022050722/587a17d91a28abb4238b5801/html5/thumbnails/108.jpg)
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