Facebook API Javascript SDK - A Complete Reference for Websites,Apps

Recently i was spending my time on Quora,Instagram and Good reads,pinterest in my free time, and the Most common feature i was seeing through the three Apps was Facebook Integration deeper and they were utilizing the Facebook API to the core and increasing the Traffic,Socializing their apps in successful manner.I have made the title as Complete reference since,Utilizing proceeding API calls we could successfully socialize and integrate apps efficiently with facebook and drive more social traffic.

Rather than the Company Advertising,When Friend suggest you via App,that will be really true and awesome to check it out and which drives more user Engagements to your app.

Facebook API provides excellent API service to integrate with Their friends and share the apps from likes to custom Stories via your app.So lets come up and use the API effectively and deeply link your service and make the users to socialize and drive social traffic to your web app without much Efforts.

Prerequisites :

You Should have Valid Facebook Developer account to create apps and performing tasks and little javascript knowledge and data sharing knowledge to integrate with your site.

Scope :

After Working out from this Post you can Integrate Facebook API such as Like,Comments,Photo upload,Links Sharing and custom stories from your site and increase your Social traffic and engagement of users.

How Does it work ? 

Generally Facebook API is normal Web service (RESTful) where resource are accessed via URLs.Each method/functions has separate url to access with Access tokens with privacy/permissions from users and Oauth Authentications.

Procedure :

1. Create App in facebook with corresponding Name.
2. Fill out all the forms corresponding for web pages(since web app)
3. Get your APP_ID and Secret KEY for the APP.
4. Add your contact email address and App namespace and Domain of the APP.

Initialize Your APP with Facebook JS SDK : 

Facebook provides Javascript library so that you can perform the API calls with authentication and check the status of Facebook login/logout and even more Event Listeners for task to be performed after liking/Commenting/sharing.

  <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'YOUR APP ID HERE',
          xfbml      : true,
          version    : 'v2.3'
        });
      };

      (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>

Determine the User Logged in/out :

Invoking this Javascript piece of code will determine that whether the user is loggined or not and with the help of Javascript Callbacks we could determine the next action to be performed.on invoking this function you just get response object as json,so that you can know the current status of the person.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    FB.login();
  } else {
    FB.login();
  }
 });

so,With the help of above function we could authenticate the valid user to the app.

Login using FB with permissions :

So,Invoke Login when user hits a button or Facebook too gave inbuild html tag for login Button.So just pass the permissions as parameters.

FB.login(function(response) {
  if (response.status === 'connected') {
    console.log("Thanks for login and you can perform");
     testAPI();
  } else if (response.status === 'not_authorized') {
      console.log("you can't use our app unless you just login");
  } else {
  }
});

Getting User Public Profile Data :

inorder to get user info and save it in our Database just invoke FB.api method and response would be as JSON object as well in callback you can do server side calls with javascript.

FB.api('/me', function(response) {
    console.log(JSON.stringify(response));
   transferToMyServercall(response);
});

Facebook Share Dialogs and Callback Events :

I love the most in javascript is Callbacks,and when the user likes or comments or share something via facebook we could detect the valid clicks and use it in marketing and promotions in our site.

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',
}, function(response){
  console.log("THANKS FOR SHARING! 90 CREDITS ADDED TO YOUR ACCOUNT");
});

Facebook Send Button :

Sending app invites,sharing links directly via app to fb as personalized messages to your friends.

FB.ui({
  method: 'send',
  link: 'http://www.nytimes.com/interactive/2015/04/15/travel/europe-favorite-streets.html',
});

However this makes more interesting, This is same as Pinterest to invite other users to join with you on pinterest,with personalized message to your friends as well as group message.

Note : unfortunately We dont have response object since it may be privacy part of user to share personalized message,However i dont know the actual reason behind it.(if so comment below)

Facebook Feed Sharing Dialog :

FB.ui({
  method: 'feed',
  link: 'http://www.i-visionblog.com',
  caption: 'An example caption',
}, function(response){});

This kind of share dialog box can be used in both ways,

• Sharing the info in your wall - via app.
• Sharing to friends timeline directly by passing the options as from,to,picture,caption etc.have a look at complete option list here.

The response would be post id after sharing in wall or feed successfully.

Note : Once again if your friend chooses privacy as only she/he could post on his/her timeline,then there would be an Exception and be ready to handle.

Add Friend dialog - Friend Request :

Bad!luck, this is completely removed above API 2.0 version.

Event Subscription :

One of the most likable feature is event subscription,which will make our app to respond to likes,comments,share as callbacks.this would be better for writing general application logics.

For example: 

When a User at Quora shares answer via Social Network the answer writer receives Points based on sharing,So here

onsharing event occured and as callback the answer writer gets point updated in Database.(However that's just example)

<div 
  class="fb-send" 
  data-href="http://url.to.your.page/page.html"
  data-colorscheme="dark">
</div>

// In your onload method
FB.Event.subscribe('message.send', message_send_callback);

// In your JavaScript
var message_send_callback = function(url) {
  console.log("hey You get more points,thanks for sharing");
  console.log(url);
}

The same way once after subscribed,we could also unsubscribe the events that occurs.

So,with these components and API,we could develop and promote our Data driven Web applications/games and bring back more traffic to our site/App.

For hugs/bugs/suggestions/help/projects,just drop me a mail to s.shivasurya@gmail.com or chat with me in Facebook/G+ chat.follow me in twitter,linkedin for updates.Share is care.Do comments.

Read More