Facebook Javascript SDK Tutorial

In this tutorial,I have covered how to use Facebook Javascript SDK.
Using this SDK, you can get the full functionality of Facebook OAuth at client-side.
i.e., Getting User Information/Posting to Wall/Reading Messages  can be done with pure JavaScript, It doesn’t require  any server-side programming.

List of Core APIs in Facebook Javascript SDK

FB.init   – Initialize the SDK with your APP ID
FB.api    – For making API calls to Graph API
FB.ui     – For triggering Facebook Dialogs like OAuth Dialog, Feed Dialog, Friends Dialog, Request Dialog, Send Dialog, Pay Dialog, Add Page Tab Dialog

FB.login -  Login to Facebook using OAuth Dialog
FB.logout – Logout the user from Facebook

FB.getLoginStatus -  For checking whether user is logged in and authenticated App
FB.getAuthResponse - Similar to FB.getLoginStatus, but it is synchronous and returns authResponse Object.

FB.Event.subscribe -  Subscribe for events (auth.login, auth.authResponseChange, auth.statusChange) and get callbacks to your function when event is fired.
FB.Event.unsubscribe – Unsubscribe the specified events

Facebook Javascript SDK DemoDownload Facebook JavaScript SDK

 

Follow the below steps to make your first JavaScript App:

1) You need a Facebook App ID to use Facebook Javascript SDK,

Check “Creating Facebook App” section in http://hayageek.com/facebook-dialog-oauth/

2). Add a Channel file in your website. Channel file is optional but it improves the Facebook Javascript SDK performance by addressing cross-domain issues in certain browsers.

content of channel file  is

     <script src="//connect.facebook.net/en_US/all.js"></script>

 

3) Facebook SDK initialization. Add the below code to your HTML file.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : 'YOUR_WEBSITE_CHANNEL_URL',
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    };

  (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/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

</script>

 

4) Write a Method for Login
Use Fb.login() method for asking user authorization.If you want extra information from user, you need to provide the necessary scope list.

for email :       -  {scope: ‘email’}
for Friends List  -  {scope: ‘read_friendlists’}
For Photos,Videos -  {scope: ‘user_photos,user_videos’}

function Login()
	{

		FB.login(function(response) {
		   if (response.authResponse) 
		   {
		    	getUserInfo(); // Get User Information.

  			} else 
  			{
  	    	 console.log('Authorization failed.');
   			}
		 },{scope: 'email'});

	}

 

5) Get User Information by making API call to Graph API

 function getUserInfo() {
	    FB.api('/me', function(response) {

		 //response.name       - User Full name
		 //response.link       - User Facebook URL
		 //response.username   - User name
		 //response.id         - id
		 //response.email      - User email

   		 });
    }

6) Add callback handler for authResponseChange events. This is optional.

FB.Event.subscribe('auth.authResponseChange', function(response) 
{
     if (response.status === 'connected') 
     {
  		//SUCCESS
     }	 
     else if (response.status === 'not_authorized') 
    {
		//FAILED
    } else 
    {
    	//UNKNOWN ERROR. Logged Out
    }
});

6) Write a Method for Logout

function Logout()
{
	FB.logout(function(){document.location.reload();});

}

 

Working Facebook Javascript SDK Example

<html>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '113455642165175', // Set YOUR APP ID
      channelUrl : 'http://hayageek.com/examples/oauth/facebook/oauth-javascript/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

	FB.Event.subscribe('auth.authResponseChange', function(response) 
	{
 	 if (response.status === 'connected') 
  	{
  		document.getElementById("message").innerHTML +=  "<br>Connected to Facebook";
  		//SUCCESS

  	}	 
	else if (response.status === 'not_authorized') 
    {
    	document.getElementById("message").innerHTML +=  "<br>Failed to Connect";

		//FAILED
    } else 
    {
    	document.getElementById("message").innerHTML +=  "<br>Logged Out";

    	//UNKNOWN ERROR
    }
	});	

    };

   	function Login()
	{

		FB.login(function(response) {
		   if (response.authResponse) 
		   {
		    	getUserInfo();
  			} else 
  			{
  	    	 console.log('User cancelled login or did not fully authorize.');
   			}
		 },{scope: 'email,user_photos,user_videos'});

	}

  function getUserInfo() {
	    FB.api('/me', function(response) {

	  var str="<b>Name</b> : "+response.name+"<br>";
	  	  str +="<b>Link: </b>"+response.link+"<br>";
	  	  str +="<b>Username:</b> "+response.username+"<br>";
	  	  str +="<b>id: </b>"+response.id+"<br>";
	  	  str +="<b>Email:</b> "+response.email+"<br>";
	  	  str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";
	  	  str +="<input type='button' value='Logout' onclick='Logout();'/>";
	  	  document.getElementById("status").innerHTML=str;

    });
    }
	function getPhoto()
	{
	  FB.api('/me/picture?type=normal', function(response) {

		  var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
	  	  document.getElementById("status").innerHTML+=str;

    });

	}
	function Logout()
	{
		FB.logout(function(){document.location.reload();});
	}

  // Load the SDK asynchronously
  (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/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

</script>
<div align="center">
<h2>Facebook OAuth Javascript Demo</h2>

<div id="status">
 Click on Below Image to start the demo: <br/>
<img src="http://hayageek.com/examples/oauth/facebook/oauth-javascript/LoginWithFacebook.png" style="cursor:pointer;" onclick="Login()"/>
</div>

<br/><br/><br/><br/><br/>

<div id="message">
Logs:<br/>
</div>

</div>
</body>
</html>

Reference:https://developers.facebook.com/docs/reference/javascript/


I am a Developer. My motto: "Language is not a barrier"

All posts by Ravishanker Kusuma