The document provides an overview of the Facebook JavaScript SDK. It discusses loading and initializing the SDK, using it to check login status and perform login, subscribing to events, and making API calls to Facebook for user data and to post to Facebook. The SDK enables using Facebook features like the Like button and Login in websites and accessing the Graph API and FQL from JavaScript.

1. FB Developers
Workshop : Facebook JavaScript SDK
@d_danailov

2. Workshop : FB JavaScript SDK
Dimitar Danailov
Senior Developer at 158ltd.com
dimityr.danailov[at]gmail.com
Github
Founder at VarnaIT
Senior Developer at 158ltd.com

3. Topics Today
●
●
●
●
●
Introduction
Developers Facebook
Official Facebook SDKs
Third-Party SDKs
JavaScript SDK

4. Introduction
1. Workstation
2. Facebook JavaScript SDK

5. Developers Facebook

8. SDK

9. Facebook SDK

10. iOS

12. Android

14. JavaScript
● Enables you to use the Like Button and other Social
Plugins on your site.
● Enables you to use Facebook Login to lower the barrier
for people to sign up on your site.
● Makes it easy to call into Facebook's primary API,
called the Graph API.
● Launch Dialogs that let people perform various actions
like sharing stories.
● Facilitates communication when you're building a game
or an app tab on Facebook.

15. PHP
The Facebook SDK for PHP enables developers to
implement a rich set of server-side functionality for
accessing Facebook's API. This includes access to all of
the features of the Graph API and FQL.
The SDK is typically used to perform operations as an app
administrator, but can also be used to perform operations
on behalf of the current session user. By removing the
need to manage access tokens manually, the SDK greatly
simplifies the process of authentication and authorizing
users for your app.

16. Third-Party SDKs
●
●
●
●
Flash (ActionScript) By Adobe
Python
Java
C# by Outercurve Foundation with Microsoft
Sponsorship
● Ruby
● Node.js

17. JavaScript SDK

18. Load SDK
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName (s)[0];
if (d.getElementById (id)) {
return;
}
js = d.createElement (s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.
js";
fjs.parentNode .insertBefore (js, fjs);
}(document, 'script', 'facebook-jssdk' ));

19. FB.Init
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId
: 'YOUR_APP_ID' , // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html' , // Channel
file for x-domain comms
status
: true, // Check Facebook Login status
xfbml
: true // Look for social plugins on the page
});
// Additional initialization code such as adding Event
Listeners goes here
};

20. FB.getLoginStatus
FB.getLoginStatus (function (response) {
if (response.status === 'connected' ) {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse .userID;
var accessToken = response.authResponse .accessToken ;
} else if (response.status === 'not_authorized' ) {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});

21. FB.getLoginStatus(2)
{
status : 'connected' ,
authResponse : {
accessToken : '...',
expiresIn : '...',
signedRequest : '...',
userID : '...'
}
}

22. FB.login
FB.login(function (response) {
if (response.authResponse ) {
console .log('Welcome! Fetching your information.... ' );
FB .api('/me', function (response) {
console .log('Good to see you, ' + response.name + '.');
});
} else {
console .log('User cancelled login or did not fully
authorize.' );
}
});

23. Facebook Query Language (FQL)
Reference
// FQL query
var query = "SELECT uid FROM page_fan WHERE page_id = ' " +
FacebookPageId + "'" + " AND uid = ' " + uid +"' LIMIT 1";
FB.api('fql', { q: query}, function (response) {
if (response.data.length === 0) {
// Load Fan-gating page
}
});

24. FB.Event.subscribe
FB.Event.subscribe('edge.create' , function (href, widget) {
alert ('You liked the URL: ' + href);
}
);
FB.Event.subscribe('auth.authResponseChange' , function (response) {
alert('The status of the session is: ' + response.status);
});

25. FB.Event.subscribe
FB.Event.subscribe('edge.create' , function (href, widget) {
alert ('You liked the URL: ' + href);
}
);
FB.Event.subscribe('auth.authResponseChange' , function (response) {
alert('The status of the session is: ' + response.status);
});

26. FB.api
var registartionPermission = new Array();
registartionPermission .push('email');
registartionPermission .push('user_birthday' );
registartionPermission .push('user_likes' );
registartionPermission .push('publish_actions' );

27. FB.api (2)
FB.api('/me/permissions' , function (response) {
if (response.hasOwnProperty ('data')) {
var permissionCounter = 0;
for (var iterator in registartionPermission ) {
// ...
}
if (permissionCounter === registartionPermission .length) {
//...
}
}
});

28. FB.api (3)
// Get Facebook database information for user
FB.api('/me', function (response) {
var jsonString = JSON.stringify(response);
$.ajax({
url : server.registeruser ,
data : jsonString ,
type : 'POST',
contentType : 'application/json' ,
dataType : "json",
}).done(function () {
}).fail(function (error) {
});
});

29. FB.api (4)
// POST Request to Facebook for a new Facebook post message
FB.api('/me/feed' , 'post', {
message : parser.fbtitle,
link: parser.fblink,
picture : parser.fbimage,
name: parser.fbname,
description : parser.fbdescription
}, function (data) {
//console.log(data); - Preview Error message
});

30. Questions ?
Dimitar Danailov
Senior Developer at 158ltd.com
dimityr.danailov[at]gmail.com
Github
Founder at VarnaIT
Senior Developer at 158ltd.com