Facebook JavaScript SDK made simple

To work with the Facebook API you have to load the Facebook JavaScript SDK, initialize your Facebook application, authenticate the user and request an access token to then send the final Facebook API calls. In this long process chain much can go wrong. Especially because the calls happen all asnychron. You have to work with the correct callback mechanisms to reach the goal. To hide this mechanism and to make the Facebook API easier to use, I have created an abstraction, with which you can work much easier, as you can see here:

<script src="./js/simple-facebook.js"></script>
<script>
  // Setup
  var fb = new SimpleFacebook();
  fb.setAppId('255100001240698');
  fb.setLocale('de_DE');
  fb.setPermissions('email,user_about_me,friends_about_me,publish_actions');
  // Usage
  fb.showUsersName();
  fb.showUsersLink();
</script>

Doesn’t it look great? No more need to include a fb-root tag or many JavaScript snippets. All you need is the simple-facebook.js file, which can be expanded depending on your needs. Here is a basic version, which illustrates the concept:

simple-facebook.js

function SimpleFacebook()
{
  this.appId = '';
  this.userId = '';
  this.accessToken = -1;
  this.locale = 'en_US';
  this.permissions = '';
  this.display = 'page'; // Can be page, popup, iframe, or touch
}
 
SimpleFacebook.prototype.setAppId = function(appId){
  this.appId = appId;
};
 
SimpleFacebook.prototype.setPermissions = function(permissions){
  this.permissions = permissions;
};
 
SimpleFacebook.prototype.setLocale = function(locale){
  this.locale = locale;
};
 
SimpleFacebook.prototype.setDisplay = function(display){
  this.display = display;
};
 
SimpleFacebook.prototype.loadSdk = function(callback){
  console.log('Load Facebook JavaScript SDK asynchronously');
 
  var that = this;
 
  window.fbAsyncInit = function(){
    // Prevents: FB.login() called before FB.init().
    that.initApp();
    // Prevents: An active access token must be used to query information about the current user.
    if(typeof callback != 'undefined')
      that.executeWithAccessToken(callback);
    else
      that.executeWithAccessToken();
  };
 
  // Prevents: FB is not defined.
  (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/"+that.locale+"/all.js";
    ref.parentNode.insertBefore(js, ref);
  }(document));
}
 
SimpleFacebook.prototype.initApp = function(){
  if(typeof FB !== 'undefined'){
    FB.init({
      appId: this.appId, 
      status: true, 
      cookie: true, 
      xfbml: true
    });
  }else{
    this.loadSdk();
  }
};
 
SimpleFacebook.prototype.executeWithAccessToken = function(callback){
  console.log('Request access token...');
  var that = this;
 
  if(typeof FB == 'undefined'){
    that.loadSdk(callback);
  }else{
    if(typeof that.accessToken != 'string'){
      FB.login(function(response){
        if (response.authResponse){
          that.accessToken = response.authResponse.accessToken;
          console.log('Got access token: '+that.accessToken);
          if(typeof callback != 'undefined'){
            callback(that.accessToken);
          }
        }
      }
      ,{
        scope:that.permissions,
        display:that.display
      });
    }else{
      if(typeof callback != 'undefined'){
        callback(that.accessToken);
      }
    }
  }
}
 
/* Custom API functions */
SimpleFacebook.prototype.showUsersName = function(){
  var that = this;
 
  var callback = function(){
    FB.api('/me?access_token='+that.accessToken,function(response){
      console.log('Show user\'s name');
      alert(response.name);
    });
  }
 
  that.executeWithAccessToken(callback);
}
 
SimpleFacebook.prototype.showUsersLink = function(){
  var that = this;
 
  var callback = function(){
    FB.api('/me?access_token='+that.accessToken,function(response){
      console.log('Show user\'s link');
      alert(response.link);
    });
  }
 
  that.executeWithAccessToken(callback);
}

Process chain

The first call to fb.showUsersName(); does the following:

Request access token...
Load Facebook JavaScript SDK asynchronously
The "fb-root" div has not been created, auto-creating
Request access token...
Got access token: AAA[...]
Show user's name

Another call to fb.showUsersName(); leads to improved treatment of the process:

Request access token...
Show user's name

Simplification and optimization in one. That’s how JavaScript tools should work!

simple-facebook.js

Process chain

Schreibe einen Kommentar Antworten abbrechen