workshop : facebook javascript sdk
TRANSCRIPT
![Page 1: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/1.jpg)
FB Developers
Workshop : Facebook JavaScript SDK
@d_danailov
![Page 2: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/2.jpg)
Workshop : FB JavaScript SDK
Dimitar DanailovSenior Developer at 158ltd.com
dimityr.danailov[at]gmail.comGithub
Founder at VarnaITSenior Developer at 158ltd.com
![Page 3: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/3.jpg)
Topics Today
● Introduction● Developers Facebook● Official Facebook SDKs● Third-Party SDKs● JavaScript SDK
![Page 4: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/4.jpg)
Introduction
1. Workstation2. Facebook JavaScript SDK
![Page 14: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/14.jpg)
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.
![Page 15: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/15.jpg)
PHPThe 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.
![Page 16: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/16.jpg)
Third-Party SDKs
● Flash (ActionScript) By Adobe● Python● Java● C# by Outercurve Foundation with Microsoft
Sponsorship● Ruby● Node.js
![Page 18: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/18.jpg)
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'));
![Page 19: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/19.jpg)
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 };
![Page 20: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/20.jpg)
FB.getLoginStatusFB.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. }});
![Page 21: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/21.jpg)
FB.getLoginStatus(2)
{ status: 'connected', authResponse: { accessToken : '...', expiresIn : '...', signedRequest : '...', userID: '...' }}
![Page 22: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/22.jpg)
FB.loginFB.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.'); }});
![Page 23: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/23.jpg)
Facebook Query Language (FQL) Reference
// FQL queryvar 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
}
});
![Page 24: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/24.jpg)
FB.Event.subscribeFB.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);
});
![Page 25: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/25.jpg)
FB.Event.subscribeFB.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);
});
![Page 26: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/26.jpg)
FB.apivar registartionPermission = new Array();
registartionPermission .push('email');
registartionPermission .push('user_birthday');
registartionPermission .push('user_likes');
registartionPermission .push('publish_actions' );
![Page 27: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/27.jpg)
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) {
//...
}
}
});
![Page 28: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/28.jpg)
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) {
});
});
![Page 29: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/29.jpg)
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
});
![Page 30: Workshop : Facebook JavaScript SDK](https://reader030.vdocuments.net/reader030/viewer/2022020213/58f2407e1a28ab73108b456f/html5/thumbnails/30.jpg)
Questions ?
Dimitar DanailovSenior Developer at 158ltd.com
dimityr.danailov[at]gmail.comGithub
Founder at VarnaITSenior Developer at 158ltd.com