Workshop : Facebook JavaScript SDK

download Workshop : Facebook JavaScript SDK

of 30

  • date post

    15-Apr-2017
  • Category

    Technology

  • view

    2.376
  • download

    1

Embed Size (px)

Transcript of Workshop : Facebook JavaScript SDK

  • FB Developers

    Workshop : Facebook JavaScript SDK

    @d_danailov

    https://developers.facebook.com/https://developers.facebook.com/https://twitter.com/d_danailovhttps://twitter.com/d_danailovhttp://www.varnalab.org/http://www.158ltd.com/en/

  • Workshop : FB JavaScript SDK

    Dimitar DanailovSenior Developer at 158ltd.com

    dimityr.danailov[at]gmail.comGithub

    Founder at VarnaITSenior Developer at 158ltd.com

    http://itweb-projects.com/wordpress/http://itweb-projects.com/wordpress/https://github.com/dimitardanailovhttps://github.com/dimitardanailovhttps://www.facebook.com/groups/varnait/http://www.158ltd.com/en/http://www.158ltd.com/en/http://www.varnalab.org/http://www.158ltd.com/en/

  • Topics Today

    Introduction Developers Facebook Official Facebook SDKs Third-Party SDKs JavaScript SDK

    http://www.varnalab.org/http://www.158ltd.com/en/

  • Introduction

    1. Workstation2. Facebook JavaScript SDK

    http://www.varnalab.org/http://www.158ltd.com/en/

  • Developers Facebook

    http://www.varnalab.org/http://www.158ltd.com/en/

  • http://www.varnalab.org/http://www.158ltd.com/en/https://developers.facebook.com/

  • http://www.varnalab.org/http://www.158ltd.com/en/

  • SDK

    http://www.varnalab.org/http://www.158ltd.com/en/

  • Facebook SDK

    http://www.varnalab.org/http://www.158ltd.com/en/

  • iOS

    http://www.varnalab.org/http://www.158ltd.com/en/

  • http://www.varnalab.org/http://www.158ltd.com/en/https://developers.facebook.com/docs/ios/

  • Android

    http://www.varnalab.org/http://www.158ltd.com/en/

  • http://www.varnalab.org/http://www.158ltd.com/en/https://developers.facebook.com/docs/android/

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

    https://developers.facebook.com/docs/javascript/gettingstarted/https://developers.facebook.com/docs/javascript/gettingstarted/http://www.varnalab.org/http://www.158ltd.com/en/

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

    https://developers.facebook.com/docs/php/gettingstarted/https://developers.facebook.com/docs/php/gettingstarted/http://www.varnalab.org/http://www.158ltd.com/en/

  • Third-Party SDKs

    Flash (ActionScript) By Adobe Python Java C# by Outercurve Foundation with Microsoft

    Sponsorship Ruby Node.js

    http://www.varnalab.org/http://www.158ltd.com/en/

  • JavaScript SDK

    http://www.varnalab.org/http://www.158ltd.com/en/

  • 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'));

    https://developers.facebook.com/docs/javascript/gettingstarted/#loadinghttps://developers.facebook.com/docs/javascript/gettingstarted/#loadinghttp://www.varnalab.org/http://www.158ltd.com/en/

  • 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 };

    https://developers.facebook.com/docs/javascript/gettingstarted/#loadinghttps://developers.facebook.com/docs/javascript/gettingstarted/#loadinghttp://www.varnalab.org/http://www.158ltd.com/en/

  • 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. }});

    https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/http://www.varnalab.org/http://www.158ltd.com/en/

  • FB.getLoginStatus(2)

    { status: 'connected', authResponse: { accessToken : '...', expiresIn : '...', signedRequest : '...', userID: '...' }}

    https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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.'); }});

    https://developers.facebook.com/docs/reference/javascript/FB.login/https://developers.facebook.com/docs/reference/javascript/FB.login/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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

    }

    });

    https://developers.facebook.com/docs/reference/fql/https://developers.facebook.com/docs/reference/fql/https://developers.facebook.com/docs/reference/fql/https://developers.facebook.com/docs/reference/fql/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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);

    });

    https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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);

    });

    https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/http://www.varnalab.org/http://www.158ltd.com/en/

  • FB.apivar registartionPermission = new Array();

    registartionPermission .push('email');

    registartionPermission .push('user_birthday');

    registartionPermission .push('user_likes');

    registartionPermission .push('publish_actions' );

    https://developers.facebook.com/docs/reference/javascript/FB.api/https://developers.facebook.com/docs/reference/javascript/FB.api/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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) {

    //...

    }

    }

    });

    https://developers.facebook.com/docs/reference/javascript/FB.api/https://developers.facebook.com/docs/reference/javascript/FB.api/http://www.varnalab.org/http://www.158ltd.com/en/

  • 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) {

    });

    });

    https://developers.facebook.com/docs/reference/javascript/FB.api/https://developers.facebook.com/docs/reference/javascript/FB.api/http://www.varnalab.org/http://www.158ltd.com/en/

  • FB.api (4)// POST Request to Facebook for a new Facebook post message

    FB.api('