Date post: | 15-Apr-2017 |
Category: |
Social Media |
Upload: | yi-fan-chu |
View: | 472 times |
Download: | 4 times |
Facebook JavaScript SDK
Facebook JavaScript SDKYi-Fan Chu, 2015
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 :)
Get comfy :) Let’s roll out!
Before we start…
Facebook JavaScript SDK
1.Essential Knowledge
2.Technical Details
3.Implementation
Things we’ll learn 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
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.
Facebook JavaScript SDKFacebook DevelopersCreate your Facebook App here!
Facebook JavaScript SDKApp DashboardControl your Facebook App here!
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
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.
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 SDK
API v.s. SDK v.s. IDE
API SDK IDE
In some cases..
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.
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!
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 SDKhttps://developers.facebook.com/docs/javascript/quickstart/v2.5
1.Docs
2.Web SDKs/ JavaScript SDK/ Quickstart
Facebook JavaScript SDK
FB.Event.subscribe( event, callback);
FB.getLoginStatus( callback);
In JavaScript SDK…
Facebook JavaScript SDK
Callback Function
function jobcallback
argument
Data
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
https://developers.facebook.com/docs/facebook-login/web/login-button
1.Docs
2.Facebook Login
3.Web/ 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 SDKhttps://developers.facebook.com/docs/facebook-login/web
1.Docs
2.Facebook Login
3.Web
4.Invoking the login dialogwith the Javascript SDK
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 SDKhttps://developers.facebook.com/docs/graph-api/using-graph-api/v2.5
2.APIs and SDKs
3.Using the Graph API
1.Docs
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
https://developers.facebook.com/docs/sharing/reference/share-dialog
1.Docs2.Sharing
3.Web
4.Share Dialog
Facebook JavaScript SDK
Download JS SDK
Login
Graph API
Sharing
Social Plugins
Technical Details
Facebook JavaScript SDK
Like button
Social Plugin
Facebook JavaScript SDK
https://developers.facebook.com/docs/plugins/like-button
1.Docs2.Social Plugin
4.Get Code
3.like button
Facebook JavaScript SDK
ImplementationPart 3 of 3
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
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..
Facebook JavaScript SDKSetup
Add a New App
Choose “My Apps” and “Add a New app”.
https://developers.facebook.com/
Facebook JavaScript SDKSetupChoose “Website”.
Website
Facebook JavaScript SDKSetupAdding a name in the blank (e.g. example).
1.example2.Create New Facebook App ID
Facebook JavaScript SDKSetupChoose a category and click create button.
3.Create App ID
1.No! Don’t touch it.
2.CategoryApp for Pages
Facebook JavaScript SDKSetupSkip the quick start.
Skip Quick Start
Facebook JavaScript SDKSetupGo to the setting section.
Go to Settings
Facebook JavaScript SDKSetupWait here. Let’s go to Cloud 9.
Don’t leave this page and open a new tab to Cloud 9.
Facebook JavaScript SDKSetupIn cloud 9, create a new Workspace.
Facebook JavaScript SDKSetupAdd a workspace name and choose “HTML5”.
1.my-first-app
2.HTML5
3.create workspace
Facebook JavaScript SDKSetupClone the sample code from Github via git.
git clone https://github.com/tom8u4286/fb-js-sdk-practice.git
Facebook JavaScript SDKSetupYou’ll see these file loaded in your workspace.
Facebook JavaScript SDKSetup“index.html” will be your coding playground today.
index.html
Facebook JavaScript SDKSetupRun the Apache server.
Run/ Run with/ Apache httpd(PHP,HTML)
Facebook JavaScript SDKSetupThis would be the URL of your App.
Copy this URL Without this dot.Please be careful!
Facebook JavaScript SDKSetupAdd a platform in your App settings.
Add Platform
Facebook JavaScript SDKSetupChoose “Website” for your web app.
Website
Facebook JavaScript SDKSetupYour App URL should be put here.
Paste your URL to “App Domains” and “Site URL”
Facebook JavaScript SDKSave ChangesBecause it’s very important, it has to be said 3 times..
1.Save Changes2.Save Changes3.Save Changes
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
Facebook JavaScript SDKSetupCopy the code. ( command + c )
Copy the snippet of code
Facebook JavaScript SDKSetupThe first step of everything, remember?
Paste the codeafter the opening <body>
Facebook JavaScript SDKSetupBeautify your code.
To beautify your code in cloud 9:command + shift + B (mac)Ctrl + shift + B (windows)
Facebook JavaScript SDKSetupChange the argument in function “fbAsyncInit”.
Change the appId to “FacebookAppId”
(mind the capital letters)
Facebook JavaScript SDKSetupGo to the App dashboard.
Go to the dashboard
Facebook JavaScript SDKSetupCopy the App Id and paste in your code.
Copy the App ID
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!
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
Facebook JavaScript SDKSetupThen call it right after FB init.
2.In the fbAsyncInit(),call the function initCheck();
1.Scroll up
Facebook JavaScript SDKSetupSee if you initialization successful:)
2.In Appache Runnerconsole
3.LEFT click the URL
1.Save (command + s)
Facebook JavaScript SDKSetupCongratulations! You’ve just set up JS SDK.
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
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 ..
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
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
Facebook JavaScript SDKLoginIt’s very simple, so try to code by yourself :)
2.Define a login button.
1.Scroll down
Facebook JavaScript SDKLoginPractice makes perfect :)
2.In the script tag,define a function loginCheck();
Try to code on your own :)
1.Scroll down
Facebook JavaScript SDKLoginDefine a event listener.
1.In the script,call the loginCheck()
when the button is clicked.
2.Save (command + s)
Facebook JavaScript SDKLoginWell done! You’ve just learned how to login!
Reload the page and try to login :)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
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 ..
Facebook JavaScript SDKFetch picture and nameLogout first.
Logout your App.
Facebook JavaScript SDKFetch picture and nameThe picture would be loaded to the img tag.
2.Define a img and h1 tag.
1.Scroll up
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)
Facebook JavaScript SDKFetch picture and nameGood job! Very happy to see yourself, right?
Refresh the page and see what happened :)
Facebook JavaScript SDK
Checkpoint 1: Setup
Checkpoint 2: Login
Checkpoint 3: Fetch profile picture and name
Checkpoint 4: Sharing and Comment
Implementation
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 ..
Facebook JavaScript SDKSharing and CommentLogout first.
Logout your App.
Facebook JavaScript SDKSharing and CommentThis button would share your app to FB.
Define a share button.
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
Facebook JavaScript SDKSharing and CommentClick to trigger the sharing function.
Call sharing()when the button is clicked.
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
Facebook JavaScript SDKSharing and CommentNice work! Share something to your FB :)
Remember to refresh the page :)
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