Introduction to facebook javascript sdk

Facebook JavaScript SDK

Facebook JavaScript SDKYi-Fan Chu, 2016

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 :)

Goal: Let your users login by Facebook.

Before we start…


1.65 Billion


1.Essential Knowledge

2.Technical Details

3.Implementation

3 parts of today…


Essential KnowledgePart 1 of 3


Facebook Developers Website

Facebook App

JavaScript SDK

Graph API

Essential Knowledge


App Dashboard

Documents

SDKs

Developer Tools

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!

https://developers.facebook.com


Facebook JavaScript SDKApp DashboardControl your Facebook App here!

Facebook JavaScript SDKSDKsWe will utilize JavaScript SDK today.

Facebook JavaScript SDKDeveloper ToolsTools to help you to develop Facebook App.



Facebook App

JavaScript SDK

Graph API

Essential Knowledge


Website: present information to users

Web App: interact with users

Website v.s Web App


Facebook AppWhat could Facebook do for us?

Login Share Analytics

Monetization Messenger


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.

Liked, birthday, hometown, location…



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.

Facebook JavaScript SDKAPIsAll kinds of APIs..

Map API REST API Data.Taipei

Data API Fusion API


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.

User clicked “login with Facebook” in your app.

User Authenticatesthrough typing

username and password

Your App requestsaccess and permissionsvia SDK and login dialog

Your App receivesthe access tokenfrom Facebook

SDK gets authorized,your app can access

to Facebook API


App

1.loginwith fb

www.tvbizz.net

2.request

3.logindialog

4.accept

5.access token

http://www.tvbizz.net


What is an access token?

What are the five steps of getting access token?

Find a partner and try to explain to him/her.

Fun Time


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.


FB.Event.subscribe( event, callback);

FB.getLoginStatus( callback);

In JavaScript SDK…


Callback Function

function jobcallback

Result/data

argument


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


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


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


FB.api(graph_path, callback)

Graph API


What is callback function?

Fun time


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


FB.ui(parameters, callback)

Sharing


Download JS SDK

Login

Graph API

Sharing

Social Plugins

Technical Details


Like button

Social Plugin


ImplementationPart 3 of 3


Checkpoint 1: Setup your environment

Checkpoint 2: Set static file into Django

Checkpoint 3: Using database in Django

Checkpoint 4: Facebook login

Checkpoint 5: Sharing and friend list

Implementation


Install pip. (already installed in G509)

Install Django. (already installed in G509)

Install Heroku CLI. (already installed in G509)

Create a new account in Heroku.

Build the app on Heroku.

1.Set up environmentThe goal of checkpoint 1 is to..

Facebook JavaScript SDKCreate a Heroku Accounthttps://www.heroku.com/home

Sign up for free

https://www.heroku.com/home

Facebook JavaScript SDKCreate a Heroku Accounthttps://www.heroku.com/home

2.Choose Python

3.Create Free Account

1.Enter yourName and Email

https://www.heroku.com/home

Facebook JavaScript SDKCreate a Heroku AccountCheck your email to comfirm.

2.Click the link to confirm

1.Check your email

Facebook JavaScript SDKCreate a Heroku AccountSet your password for Heroku.

Facebook JavaScript SDKCreate a Heroku AccountCongrats! Your account is set.

Facebook JavaScript SDKCreate an App on HerokuStop here first…

Don’t leave the page…Let’s go to FB dev.

Facebook JavaScript SDKOpen your iTerm2.iterm2 is a useful terminal app.

Facebook JavaScript SDKCreate an App on HerokuWe utilize the template heroku gived us.

cd Desktop1.go to Desktop

2. download the template

django-admin.py startproject --template=https://github.com/heroku/heroku-django-template/archive/master.zip --name=Procfile myproject

https://github

Facebook JavaScript SDKCreate an App on HerokuWe utilize the template heroku gived us.

Your first project is born!!

Facebook JavaScript SDKLogin Heroku.Use the email you created Heroku account.

Facebook JavaScript SDKGo to myproject/cd myproject

Facebook JavaScript SDKCreate an App on Heroku.heroku create u10x160xx

App URL

Facebook JavaScript SDKGit commit.commit the first version of your project.

Facebook JavaScript SDKSet Heroku as a git repository.heroku git:remote -a u10x160xx

Facebook JavaScript SDKPush your project to Heroku.git push heroku master

Facebook JavaScript SDKNice work!Your Django project is running on Heroku.

https://u10x160xx.herokuapp.com/


Set up your Sublime and iTerm.

Put your static html into Django.

Push your project to Heroku by git.

2.Set static file into DjangoThe goal of checkpoint 2 is to..

Facebook JavaScript SDKOpen Sublime Text 2.

Mac: Press f4

Facebook JavaScript SDKDrag your project in Sublime.

drag into Sublime.

Facebook JavaScript SDKIf Side Bar didn’t show..View/ Side Bar/ Show Side Bar

Facebook JavaScript SDKOpen your iTerm.Set your iTerm and Sublime like this…

Mac : “cmd” + “=”to enlarge font size

Facebook JavaScript SDKpython manage.py startapp myappCreate an app in your project

Facebook JavaScript SDKCreate 2 new folders in myapp.

Facebook JavaScript SDKCmyapp/templates/ & myapp/static/Create 2 new folders in myapp.

Facebook JavaScript SDKCstatic/js/ & static/images/ & static/css/Create 3 new folders in static.

Facebook JavaScript SDKCtemplates/myapp/Create a new folders in templates.

Facebook JavaScript SDKCreate index.htmlmyapp/ index.html

2.save the file(command + s)

1.create a new file

index.html

Facebook JavaScript SDKCheck your folder structure…It’s complicated…

Facebook JavaScript SDKCopy the file on Github.

https://github.com/tom8u4286/index/blob/master/index.html

copy the file(command + c)

https://github.com/tom8u4286/index/blob/master/index.html

Facebook JavaScript SDKPaste into index.htmltemplates/ myapp/ index.html

1.Paste into index.html(command + v)

2.Save(command + s)

Facebook JavaScript SDKadd “myapp” in settings.pymyproject/ settings.py

1.Find INSTALLED_APPS in settings.py

2.Add a string ‘myapp’

3.Save (command + s)

Facebook JavaScript SDKRender a viewmyapp/ views.py

1.Add a function index() in myapp/ views.py


Facebook JavaScript SDKSet the URL in urls.pymyproject/ urls.py

1.Import views in myapp/

2.Set the root url to views.index


Facebook JavaScript SDKPush your project to Heroku.

Facebook JavaScript SDKWhat is the problem?The CSS file has not been loaded..

Facebook JavaScript SDKCreate index.cssmyapp/ static/ css/ index.css


1.create a new file

index.css


https://github.com/tom8u4286/index/blob/master/index.css

copy the file(command + c)

Copy the file on Github.

https://github.com/tom8u4286/index/blob/master/index.css

Facebook JavaScript SDKmyapp/ static/ css/ index.css

1.Paste into index.html(command + v)

Paste into index.css


Facebook JavaScript SDKLoad the static files in htmltemplates/ myapp/ index.html

1.load the static files in index.html

2.set the source of css file.


Facebook JavaScript SDKSave the img from Github.

https://github.com/tom8u4286/index/blob/master/logo.png

https://github.com/tom8u4286/index/blob/master/logo.png

Facebook JavaScript SDKmyapp/ static/ images/ logo.png

safe in: myapp/static/images/

Save the img from Github.

Facebook JavaScript SDKtemplates/ myapp/ index.htmlLoad the static files in html

1.set the source of image file.


Facebook JavaScript SDKYour static html is working on Django.Nice work!


Set the schema in models.py

Migrate the database both in local and heroku

Get the html form by form.py

Show the posts in your app.

3.Using database in DjangoThe goal of checkpoint 3 is to..

Facebook JavaScript SDKCreate a model called “Post”.myapp/ models.py

Facebook JavaScript SDKDo them both in local and on heroku.Makemigrations and migrate.



1.create forms.py in myapp/

forms.py

Create forms.pymyapp/ forms.py

Facebook JavaScript SDKCreate AddPost to get forms.myapp/ forms.py

Facebook JavaScript SDKSet the views if we get requestmyapp/ views.py

2.import the classes we created

1.Go to myapp/ views.py

Facebook JavaScript SDKSet the views if we get requestmyapp/ views.py

1.Add a condition if we got POST request

Scroll down


Facebook JavaScript SDKMakemigrations and migrate.

Facebook JavaScript SDKTry to post something..

Try to post something…

Facebook JavaScript SDKWhat?We still need to add something in index.html…

Facebook JavaScript SDKtemplates/ index.htmlAdd the tags and push again.

1.Go to index.html

2.Add the csrf tags

4.Push again

3.Save file

Facebook JavaScript SDKThe posts didn’t appear…We need to fix something in views and index.

???

Facebook JavaScript SDKRender the posts in views.pymyapp/ views.py

1.Go to myapp/views.py

2.Add post_list

3.Save file

Facebook JavaScript SDKtemplates/ myapp/ index.htmlAdd the tags and push again.

1.Go to templates/ myapp/ index.html

2.Render the posts by Django tags


4.Push again

Facebook JavaScript SDKYour posts appeared.Nice work!


Load the FB SDK into your app.

Create an app on Facebook dev.

Set the user profile picture.

4.Facebook loginThe goal of checkpoint 4 is to..

Facebook JavaScript SDKCopy the code in FB dev.

https://developers.facebook.com/docs/javascript/quickstart

https://developers.facebook.com/docs/javascript/quickstart

Facebook JavaScript SDKtemplates/ myapp/ index.htmlPaste into index.html

2.Important! Directly after the opening <body> tag

1.Go to templates/ myapp/ index.html


Facebook JavaScript SDKCreate an App on FB dev.https://developers.facebook.com

Login with Facebook.


Facebook JavaScript SDKCreate an App on FB dev.Add a new App in your Facebook dev account.

Add a New App.

Facebook JavaScript SDKCreate an App on FB dev.Add a new App in your Facebook dev account.

1.Name for your app.e.g. sna2016

3.CategoryApp for Pages

2.Set your email.

4.Create App ID

Facebook JavaScript SDKCreate an App on FB dev.May have some security check…

Facebook JavaScript SDKCreate an App on FB dev.Go to the dashboard of your app.

Click Dashboard.

Facebook JavaScript SDKCopy the App IDIt’s in the Dashboard of your FB app.

Facebook JavaScript SDKAssign the id to an var.templates/ myapp/ index.html

Facebook JavaScript SDKGet the profile picture.templates/ myapp/ index.html

Scroll down

Bigger screen shot in next page..

Facebook JavaScript SDKWe call the func after FB init.

Scroll up

templates/ myapp/ index.html

Facebook JavaScript SDKloginCheck function…

Scroll down



Facebook JavaScript SDKCW

Facebook JavaScript SDKCall the loginCheck()

Scroll down


Facebook JavaScript SDKSet your url in the dashboard.

2.Go to Settings/ Basic

1.Go back to your app Dashboard

3.Copy and paste your url

4.Save Changes

Facebook JavaScript SDKNice work!


Sharing button.

Load user friends in facebook.

5.Sharing and friend listThe goal of checkpoint 5 is to..

Facebook JavaScript SDKAdd a sharing function.templates/ myapp/ index.html

Scroll down

Facebook JavaScript SDKMNice work!

Facebook JavaScript SDKIn window.fbloaded, add an api call



Facebook JavaScript SDKIn loginCheck, add a scope.templates/ myapp/ index.html

Facebook JavaScript SDKMake your app public.

1.App Review

2.Turn on.

Facebook JavaScript SDKAsk a friend to login!


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 javascript sdk

Engineering

Transcript of Introduction to facebook javascript sdk