Facebook Login, Facebook Connect integration with complete steps and example code

Facebook Login, Facebook Connect integration

Facebook Login, Facebook Connect integration for your website with complete steps and code.

 
  • Use the Quickstart to add Facebook Login to your app. To get started, create a Facebook App.
  • Type in a name for your app and choose the category that best describes your website.
  • Now, select the WWW platform for Facebook Login integration on your website.
  • Add a Facebook Login product to your App and click on the Set Up button.
  • Then add a link to the privacy policy and the terms of use on your website, and check your contact email.
  • Add the URL of your website. Make sure you use the correct URL (for example, http://superwebsolution.com/); otherwise, the integration not work.
  • After filling the complete information submit Your Facebook Login App for Review and make it your app LIVE as showing in the below image.
  • Once your Facebook Login App is LIVE to follow the below coding steps to integrate into your website project.

STEP 1:

Set Up the Facebook SDK for Javascript and copy below code and paste it on your website page.
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({
			appId      : '{your-app-id}', // HERE ADD YOUR FACEBOOK APP ID.
			cookie     : true,
			xfbml      : true,
			version    : 'v5.0'
		});
	};
	(function(d, s, id) { // Load the SDK asynchronously
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "https://connect.facebook.net/en_US/sdk.js";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>

STEP 2:

Here, Add the Facebook Login Button HTML code copy and paste it on your website page where you want to add.
<a href="javascript:void(0);" id="fbLoginBtn" onclick="javascript:checkFBLoginState();">
	<img src="https://img.pngio.com/facebook-sign-in-button-png-18039-free-icons-and-png-backgrounds-facebook-login-button-png-800_300.png" />
</a>

STEP 3:

 
Once clicked on Facebook Login Button this function will be called checkFBLoginState() and an open popup with a Facebook login page.
 
From FB.login() method you will get a response like as below:
{
	status: 'connected',
	authResponse: {
		accessToken: '...',
		expiresIn:'...',
		signedRequest:'...',
		userID:'...'
	}
}
<script type="text/javascript">
	function checkFBLoginState(){
		try{
			$("#fbLoginBtn").addClass("btnLoading");
			FB.login(function(mainResponse) {
				if (mainResponse.status === 'connected') {
					FB.api('/me', function(response) {
						var fbUserId = mainResponse.authResponse.userID;
						getFBUserInfo(fbUserId);
					});
				} else {
					$("#fbLoginBtn").removeClass("btnLoading");
				}
			}, {scope: 'public_profile,email'});
		}catch(e){
			console.log("Error: checkFBLoginState try failed! "+e);
		}
	}
</script>
Also, here are the details of the response parameters from Facebook.
 
status – specifies the login status of the person using the app. The status can be one of the following:
connected – the person is logged into Facebook and has logged into your app.
not_authorized – the person is logged into Facebook, but has not logged into your app.
unknown – the person is not logged into Facebook, so you do not know if they have logged into your app or FB.logout() was called before, and therefore, it cannot connect to Facebook.

authResponse – is included if the status is connected and is made up of the following:
accessToken – contains an access token for the person using the app.
expiresIn – indicates the UNIX time when the token expires and needs to be renewed.
signedRequest – a signed parameter that contains information about the person using the app.
userID – the ID of the person using the app.

STEP 4:

Once got Facebook login success response this function will be called getFBUserInfo() and get the logged-in user to Facebook details example name, email, picture, etc which you will add in the scope.
and you need to save logged-in user detail in your local database using the $.ajax() method.
<script type="text/javascript">
	function getFBUserInfo(fbUserId){
		try{
			FB.api('/'+fbUserId+'/?fields=id,name,email,picture.type(large)', 'GET', {}, function(uResponse) {
				var socialData = {"name": uResponse.name, "email": uResponse.email, "id": uResponse.id, "imgUrl": uResponse.picture.data.url};
				$.ajax({
					type: "POST",
					url: "authenticate.php", // HERE ADD YOUR SERVER SIDE FILE PATH AND SAVE USER DATA IN YOUR DATABASE.
					data: {"data-type": "social-auth", "data": socialData},
					success: function(responseJson) {
						try{
							setCookie('u-auth-cookie', '', 0);
							if(responseJson.status == true){
								window.location.href = site_url+'profile/'+responseJson.res.user.user_id+'/'; // After Saved redirect to user profile page on your web page.
							} else {
								$("#fbLoginBtn").removeClass("btnLoading");
							}
						}catch(e){
							console.log("Error: getFBUserInfo api try failed! "+e);
						}
					},
					error: function(xhr) {
						$("#fbLoginBtn").removeClass("btnLoading");
						console.log("Error: FB:social-auth api error!");
					}
				});
			});
		}catch(e){
			console.log("Error: FB getFBUserInfo try failed! "+e);
		}
	}
</script>

STEP 5:

Here, just an example of PHP server-side file (authenticate.php) code to save logged-in user detail in the local database and also you can write your logic according to your requirements.
<?php 
// First, connect to your database using your DB connection code and write your own logic as per your requirements...

$response = [];

if( isset($_POST['data-type']) && $_POST['data-type'] == "social-auth" && isset($_POST['data']) && $_POST['data'] != "" ) {
	// HERE are POST parameters example. Update below code and save in your local database using your DB SQL query etc.
	$_POST['data']['name']; 
	$_POST['data']['email']; 
	$_POST['data']['imgUrl']; 
	$_POST['data']['id'];
	
	// Once all done send SUCCESS response to ajax call...
	$response['status'] = true;
} else {
	// Here you can send FAILED response to ajax call like validation failed, unable to save in DB etc...
	$response['status'] = false;
}

header("Content-type: application/json; charset=utf-8");
echo json_encode($response);
die();
?>

STEP 6:

Simple code for Logout from Facebook.
<script type="text/javascript">
  FB.logout(function(response) {
    console.log('Facebook User signed out.');
  });
</script>
Congratulations, you have added Facebook Login, Facebook Connect to your website!
 
Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!
 
Was this page helpful? Do not forget to share this post!

Leave a Reply

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