Introduction to facebook java script sdk

Facebook JavaScript SDK Facebook JavaScript SDK Yi-Fan Chu, 2015 Social Network Application Department 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 Knowledge Part 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 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 JavaScript SDK Facebook Developers Create your Facebook App here!

Facebook JavaScript SDK App Dashboard Control your Facebook App here!

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

Facebook JavaScript SDK 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.

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

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!

Facebook JavaScript SDK Facebook Login Sharing Social Plugins Products What you can do with Facebook SDK.

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

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.

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 Details Part 2 of 3

Facebook JavaScript SDK Download JS SDK Login Graph API Sharing Social Plugins Technical Details

Facebook JavaScript SDK 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

Facebook JavaScript SDK Download JavaScript SDK Self called function fbAsyncInit is called. Don’t forget to change the App ID.

Facebook JavaScript SDK https://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 1.Use the login button 2.Call the login function Login There’re two ways to login.

Facebook JavaScript SDK Just like using Bootstrap, assign a speciﬁc 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 SDK https://developers.facebook.com/docs/facebook-login/web 1.Docs 2.Facebook Login 3.Web 4.Invoking the login dialog with the Javascript SDK

Facebook JavaScript SDK FB.api(graph_path, callback) Graph API

Facebook JavaScript SDK https://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 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 Like button Social Plugin

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

Facebook JavaScript SDK Implementation Part 3 of 3

Facebook JavaScript SDK Checkpoint 1: Setup Checkpoint 2: Login Checkpoint 3: Fetch proﬁle 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. Setup The goal of checkpoint 1 is to..

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

Facebook JavaScript SDK Setup Choose “Website”. Website

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

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

Facebook JavaScript SDK Setup Skip the quick start. Skip Quick Start

Facebook JavaScript SDK Setup Go to the setting section. Go to Settings

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

Facebook JavaScript SDK Setup In cloud 9, create a new Workspace.

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

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

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

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

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

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

Facebook JavaScript SDK Setup Add a platform in your App settings. Add Platform

Facebook JavaScript SDK Setup Choose “Website” for your web app. Website

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

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

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

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

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

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

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

Facebook JavaScript SDK Setup Go to the App dashboard. Go to the dashboard

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

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

Facebook JavaScript SDK 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

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

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

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

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

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

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

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

Facebook JavaScript SDK Login Practice makes perfect :) 2.In the script tag, deﬁne a function loginCheck(); Try to code on your own :) 1.Scroll down

Facebook JavaScript SDK Login Deﬁne a event listener. 1.In the script, call the loginCheck() when the button is clicked. 2.Save (command + s)

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

Facebook JavaScript SDK 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 The goal of checkpoint 3 is to ..

Facebook JavaScript SDK Fetch picture and name Logout ﬁrst. Logout your App.

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

Facebook JavaScript SDK Fetch picture and name 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 3.Save (command + s)

Facebook JavaScript SDK Fetch picture and name Good job! Very happy to see yourself, right? Refresh the page and see what happened :)

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

Facebook JavaScript SDK Sharing and Comment Logout ﬁrst. Logout your App.

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

Facebook JavaScript SDK 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

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

Facebook JavaScript SDK 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. 4.Save (command + s) 1.Scroll up

Facebook JavaScript SDK Sharing and Comment Nice 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

Introduction to facebook java script sdk

More Related Content

What's hot

Viewers also liked

Similar to Introduction to facebook java script sdk

Recently uploaded

Introduction to facebook java script sdk