introduction to facebook java script sdk

Facebook JavaScript SDK

Facebook JavaScript SDKYi-Fan Chu, 2015

Social Network ApplicationDepartment 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 KnowledgePart 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 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 App

JavaScript SDK

Graph API

Essential Knowledge


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 benefits you get when you create a Facebook App.



Facebook App

JavaScript SDK

Graph API

Essential Knowledge


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.


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


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 Login

Sharing

Social Plugins

ProductsWhat you can do with Facebook 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 App

JavaScript SDK

Graph API

Essential Knowledge


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.


“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 DetailsPart 2 of 3


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


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


FB.Event.subscribe( event, callback);

FB.getLoginStatus( callback);

In JavaScript SDK…


Callback Function

function jobcallback

argument

Data


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


1.Use the login button

2.Call the login function

LoginThere’re two ways to login.


Just like using Bootstrap, assign a specific 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

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


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


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


What is callback function?

Fun time


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


FB.ui(parameters, callback)

Sharing


https://developers.facebook.com/docs/sharing/reference/share-dialog

1.Docs2.Sharing

3.Web

4.Share Dialog


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


Like button

Social Plugin


https://developers.facebook.com/docs/plugins/like-button

1.Docs2.Social Plugin

4.Get Code

3.like button


ImplementationPart 3 of 3


Checkpoint 1: Setup

Checkpoint 2: Login

Checkpoint 3: Fetch profile 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.

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


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.


Checkpoint 1: Setup

Checkpoint 2: Login



Implementation


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.


Facebook JavaScript SDKLoginWell done! You’ve just learned how to login!

Reload the page and try to login :)


Checkpoint 1: Setup

Checkpoint 2: Login



Implementation


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


Facebook JavaScript SDKFetch picture and nameGood job! Very happy to see yourself, right?

Refresh the page and see what happened :)


Checkpoint 1: Setup

Checkpoint 2: Login



Implementation


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.


1.Scroll up

Facebook JavaScript SDKSharing and CommentNice 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

Social Media