Post
Ask Question

Introducing Facebook SDK For JavaScript

Introduction

In the current scenario the social integration in the websites are very general to enhancing the user experience. Social integration like Facebook authentication, display like or comment widgets or posting on the wall. We'll work on the Facebook SDK for JavaScript today that is used to provide the functionality that can be consumed from the client side script to leverage such an integration.

In that context, I am developing an application and you'll learn to implement the Facebook Authentication or retrieving the user's details like name and photos and you can also post on the user's wall.

We'll proceed here with the following procedure:

  • Working with Facebook App
  • Creating the application
  • Facebook Login by App
  • Posting on User's Wall
  • Facebook Logout

Working with Facebook App

At first you need to have the Facebook App Id and App Secret. If you do not have the Facebook App ID or Secret then you must go to the developers.facebook.com and create the app so that you can have the app id and app secret of your Facebook app. You can also refer to Creating Facebook App for help. So, just copy your App Id only.

Creating the Application

Step 1: Create the new application or website.

Step 2: Add the web form and in the body tag modify the div with the following markup:

  1. <div id="fb-root">  
  2.     <input type="button" value="Login" onclick="FbApp_Login();" />  
  3. </div> 

Step 3: Inside the <head> add the following <script> block:

  1. <script>  
  2.     window.fbAsyncInit = function () {  
  3.         FB.init({  
  4.             appId: 'Your App ID Value',  
  5.             status: true,  
  6.             cookie: true,  
  7.             xfbml: true  
  8.         });  
  9.      };  
  10.      (function (doc) {  
  11.         var script;  
  12.         var id = 'facebook-jssdk';  
  13.         var ref = doc.getElementsByTagName('script')[0];  
  14.         if (doc.getElementById(id)) {  
  15.             return;  
  16.         }  
  17.         script = doc.createElement('script');  
  18.         script.id = id;  
  19.         script.async = true;  
  20.         script.src = "//connect.facebook.net/en_US/all.js";  
  21.         ref.parentNode.insertBefore(script, ref);  
  22.     }(document));  
  23. </script> 

In the code above the init() method is used to start the Facebook SDK and holds the parameters like appid in which you provide the Facebook app id value and status parameter control whether the current login status of a user is retrieved with each page refresh. A cookie indicates whether a cookie is issued for that session and xfbml indicates whether the markup of the social plugins are parsed.

Facebook Login by App

In this section we will create the login method using the following procedure.

Step 1: Now we'll write the login() method with the following code:

  1. function FbApp_Login() {  
  2.      FB.login(function (response) {  
  3.          if (response.authResponse) {  
  4.              // some code here  
  5.          }  
  6.          else {  
  7.              alert("Attempt of Login is Failed!");  
  8.          }  
  9.       }, { scope: 'email,user_photos,publish_actions' });  
  10. } 

The FbApp_Login() calls the login() method of the Facebook SDK internally that accepts the two parameteres, a callback function that indicates the success or failure of the Facebook login process and the permissions needed by the Facebook app.

Step 2: Run the application and copy the URL and paste it into the site URL of the Facebook app as in the following::

SiteUrl of Facebook Application

Step 3: Now run the application again and click on the Login button, the OAuth dialog to the end user open as shown below:

Facebook Credentials

After entering the credentials, you will be asked for authentication for the fb app for the requested permissions.

Facebook App Authentication

Posting on User's Wall

Now you are successfully associated with the Facebook account. If you want to post on a user's wall, it is possible with the Graph API. Start with the following procedure.

Step 1: Add the following markup after the login button markup:

  1. <label id="lable1">Enter the Message</label>  
  2. <input type="text" id="Message" />  
  3. <input type="button" id="postButton" value="Post Message" onclick="postMessage();" /> 

Step 2: Add the following code inside the <script> block:

  1. function postMessage() {  
  2.      FB.api('/me/feed', 'post', {  
  3.          message: document.getElementById('Message').value  
  4.      });  
  5. } 

In the code above, the path parameter is set to /me/feed, and the second indicates the method to be used and the last third determines the posting content.

Step 3: Now run the application and enter the message to post:

Message to Posting User Wall

Now, I am checking my wall for the post:

Posting on Wall via Facebook_App

Facebook Logout

In this section we'll create the logout method for logging out using the following procedure.

Step 1: Insert the Logout button by applying the following markup:

  1. <input type="button" value="Logout" onclick="FbApp_Logout();" /> 

Step 2: Now in the script add the following code:

  1. function FbApp_Logout(){  
  2.      FB.logout(function () { document.location.reload(); });  
  3. } 

It simply calls the Facebook SDK logout() method and simply reloads the web page once the users logs out. That's it.

Summary

This article described the Facebook SDK for JavaScript that integrates the Facebook features to the website and web application. You can learn to authenticate the Facebook App using the Facebook SDK and post the message using the Graph API. Thanks for reading.


Similar Articles