Facebook JavaScript SDK

Want to make your website or web app more engaging? Consider utilizing Facebook’s JavaScript SDK to personalize and socialize your audience’s experience. In this article I’ll break down Facebook’s JavaScript SDK documentation to explore how to integrate the data in Facebook with your page or app.

Why use Facebook Data?

Facebook for developersThe Facebook open graph api is a method to integrate Facebook data into your website or web app. This is good because you can personalize your website experience for your audience. Utilizing the SDK is also useful as a method to have folks login in. It’s a super convenient method of authentication and according to Facebook’s documentation increases conversions.

The documentation can be a bit overwhelming. I’ve tried to break it down for you here.

What can it do?

Facebook JavaScript SDK (Software Development Kit) is one way (of many) to interact with (i.e. get  from and post to) the data in Facebook.
Their main quick-start documentation can be found here: https://developers.facebook.com/docs/javascript/quickstart

JavaScript LogoFacebook offers a few main categories for integration.

    1. Social Plugins
    2. Facebook Login
    3. Facebook Graph API
    4. Dialogs
    5. Game and Page Tabs

Social Plugins

Social plugins are easy-to-use bits of code that you plug-in to your webpage. Things like adding a like button or a embedding a page/post into your site are made very easy with just a small amount of web programming knowledge.

This page will guide you to adding social plugins on your site: https://developers.facebook.com/docs/plugins/

Facebook Login

The Facebook Login allows you to establish a connection with Facebook. Want to serve up someone’s name and birthday? You’ll need to login first.

Account Creation: people to quickly and easily create an account in your app without having to set a password.

Personalization: Facebook login lets you access information which would be complex or arduous to collect

Social: Highly retentive apps let people connect with their friends in order to enable shared in-app experiences.

Some advantages of utilizing the Facebook Login include:

  • Real Identity
  • Cross Platform Login
  • Offers Another Signup Option
  • Granular Permissions
    https://developers.facebook.com/docs/facebook-login/permissions
       Offers people control over what they share
  • Gradual Authorization – you can re-request information later or request partial information to further enhance the experience.

Login ReviewLogin with Facebook Graphic

Apps may ask for the following permissions from any person without submitting for review:

If you want more information, you’ll need to submit your permission for review.
Permission Review Request URL: https://developers.facebook.com/docs/facebook-login/review

While in developing your Facebook Login experience, anyone listed in the Roles section of your app’s dashboard will be able to grant any valid permission without approval from Facebook.

Facebook SDK for JavaScript

With the Facebook SDK for JavaScript you can make calls to the Facebook Graph API.

The Graph API is the way to read and write to the Facebook Social Graph.

The graph is a low level HTTP-based API (https://en.wikipedia.org/wiki/Web_API). What that means basically is that you get or post the information using a program that has an HTTP library. One example of this would be a browser (e.g. Chrome, Edge, Firefox, Safari).

The Graph API is named after the idea of a social graph that consists of:

  • Nodes – the “things” such as a User, Photo, a Page, a Comment
  • Edges – the connections between those “things,” such a as a Page’s Photos, or a Photo’s comments
  • Fields – info about those “things” such as a persons birthday, or the name of the page.

The Graph API is HTTP based, so it works with any language that has an HTTP library.

Most Graph API request require the use of access tokens which your app can generate by implementing Facebook Login.
https://developers.facebook.com/docs/facebook-login/access-tokens/

Almost all requests are passed to the API at graph.facebook.com – the single exception is video uploads which use graph-video.facebook.com

Each node has a unique ID which is used to access it via the Graph API.

GET graph.facebook.com
/{node-id}

GET graph.facebook.com
/{node-id}/{edge-name}

The Graph API has multiple versions available to access at any one time. Each version contains a set of core fields and edge operations. You can make a call to a specific version by prepending the version identifier.

GET graph.facebook.com
/v2.2/me

The easiest way to understand the Graph API is to use it with the Graph API Explorer, a low-level tool you can use to query, add and remove data.

https://developers.facebook.com/tools/explorer

https://developers.facebook.com/docs/graph-api/using-graph-api/

Dialogs, Games, App Tabs

Facebook SDK for JavaScript Allows for dialogs that let people perform various actions like sharing stories.

Facilitates communication when you building a game
https://developers.facebook.com/docs/games/gamesonfacebook

or

an app tab
https://developers.facebook.com/docs/pages/tabs

Facebook JavaScript SDK Tools

The Explorer

The explorer is a way to “play” around with permissions, and equally important see how the data is passed to JavaScript.

https://developers.facebook.com/tools/explorer/

The Console

The console is a place to put your code to test it.

https://developers.facebook.com/tools/console/

Getting Started with the Basic Setup

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

The Facebook JavaScript SDK doesn’t have anything to download or install, simply include a bit of JavaScript in your HTML and it will asynchronously load the SDK into your pages.

<script>
   window.fbAsyncInit = function() {
    FB.init({
     appId      : 'your-app-id',
     xfbml      : true,
     version    : 'v2.8'
    });
   FB.AppEvents.logPageView();
 };
(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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

If you set status to true in the FB.init() call, the SDK will attempt to get info about the current user immediately after init. Doing this can reduce the time it takes to check for the state of a logged in user if you’re using Facebook Login, but isn’t useful for pages that only have social plugins on them.

You can use FB.getLoginStatus to get a person’s login state.

https://developers.facebook.com/docs/facebook-login/web

https://developers.facebook.com/docs/javascript/reference/FB.init/v2.8

Examples

Trigger a Share Dialogue:
https://developers.facebook.com/docs/javascript/examples#dialogs

Facebook Login:
https://developers.facebook.com/docs/javascript/examples#login

Call The Graph API
https://developers.facebook.com/docs/javascript/examples#graphapi

Using Frameworks
https://developers.facebook.com/docs/javascript/frameworks

Facebook Reference
https://developers.facebook.com/docs/javascript/reference/v2.8

Leave a Reply

Your email address will not be published. Required fields are marked *