Skip to content
Experts PHP
  • Web Tutorial Exercise
  • LARAVEL FRAMEWORK TUTORIAL
  • PYTHON TUTORIAL
  • LARAVEL 5.8
  • PHP TUTORIAL
  • HTML TUTORIAL
  • Mysql
  • C PROGRAM
  • PHP PROGRAM
Posted on September 16, 2018September 16, 2018 by jyoti

Facebook Login Using Javascript SDK

Hi guys today i will tell you how to login with facebook through javascript. And how the user’s name, user id, and user can get the information of the user’s Facebook user.

Nowadays people like to login to Facebook or Google without registering on any website because all the user’s information can be easily taken from Facebook or Google, and the user’s time is also saved from malfunctioning. Nowadays, more than one website registrations like to login with Facebook and Google.

Hi guys today i will let you know that login with facebook using javascript sdk means you can login to facebook through skd. sdk means javascript provides a script sdk api code.

Before implementing Facebook login with Javascript API on the website, you need a Facebook app ID that can be made on the Facebook app dashboard.

JavaScript Code
In JavaScript, you only need to specify your Facebook App ID in FB.init({});

  1. fbLogin() opens a login dialog to log in with Facebook credentials.
  2. getFbUserData() fetch the user profile data from Facebook and display profile details and login status to the user.
  3. fbLogout() logout the user from their Facebook account.
<script>
window.fbAsyncInit = function() {
// FB JavaScript SDK configuration and setup
FB.init({
appId : 'xxxxxxxxxxxxxxxx', // FB App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript SDK asynchronously
(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'));
// Facebook login with JavaScript SDK
function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
document.getElementById('fbLink').setAttribute("onclick","fbLogout()");
document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> '+response.id+'</p><p><b>Name:</b> '+response.first_name+' '+response.last_name+'</p><p><b>Email:</b> '+response.email+'</p><p><b>Gender:</b> '+response.gender+'</p><p><b>Locale:</b> '+response.locale+'</p><p><b>Picture:</b> <img src="'+response.picture.data.url+'"/></p><p><b>FB Profile:</b> <a target="_blank" href="'+response.link+'">click to view profile</a></p>';
// Save user data
});
}
// Logout from facebook
function fbLogout() {
FB.logout(function() {
document.getElementById('fbLink').setAttribute("onclick","fbLogin()");
document.getElementById('fbLink').innerHTML = '<img src="fblogin.png"/>';
document.getElementById('userData').innerHTML = '';
document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
});
}
</script>

HTML Code

<div class="demo-title"><h4>Login with Facebook using JavaScript Code</h4></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="div-center">
<!-- Display login status -->
<div id="status"></div>
<!-- Facebook login or logout button -->
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink">LOGIN WITH FACEBOOK</a>
<!-- Display user profile data -->
<div id="userData"></div>
</div>
</div>
</div>
</div>

Full Code Of Facebook Login Using Javascript SDK

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script>
window.fbAsyncInit = function() {
// FB JavaScript SDK configuration and setup
FB.init({
appId : 'xxxxxxxxxxxxxxxx', // FB App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript SDK asynchronously
(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'));
// Facebook login with JavaScript SDK
function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
document.getElementById('fbLink').setAttribute("onclick","fbLogout()");
document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> '+response.id+'</p><p><b>Name:</b> '+response.first_name+' '+response.last_name+'</p><p><b>Email:</b> '+response.email+'</p><p><b>Gender:</b> '+response.gender+'</p><p><b>Locale:</b> '+response.locale+'</p><p><b>Picture:</b> <img src="'+response.picture.data.url+'"/></p><p><b>FB Profile:</b> <a target="_blank" href="'+response.link+'">click to view profile</a></p>';
// Save user data
});
}
// Logout from facebook
function fbLogout() {
FB.logout(function() {
document.getElementById('fbLink').setAttribute("onclick","fbLogin()");
document.getElementById('fbLink').innerHTML = '<img src="fblogin.png"/>';
document.getElementById('userData').innerHTML = '';
document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
});
}
</script>
</head>
<body>
<div class="demo-title"><h4>Login with Facebook using JavaScript Code</h4></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="div-center">
<!-- Display login status -->
<div id="status"></div>
<!-- Facebook login or logout button -->
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink">lOGIN wITH FACEBOOK</a>
<!-- Display user profile data -->
<div id="userData"></div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</body>
</html>

 

Javascript & Jquery Problems PHP PROBLEMSfacebook login with javascript login with facebook javascript sdk

Post navigation

How to Remove .html extensions from URL?
How to get Client IP Address by Javascript or Jquery?

Our Tools

  • GST Calculator
  • Percentage Calculator
  • Add Fraction Calculator
  • Word Counter Calculator
  • Square Rool Calculator
  • Prime Number Calculator
  • Area of Circle Calculator
  • Hexa to Decimal Converter
  • Multiplication Calculator

Recent Posts

  • VSCO Downloader February 3, 2023
  • 123rf downloader Without Watermark February 1, 2023
  • Resso Downloader January 30, 2023
  • Vecteezy Video Downloader January 9, 2023
  • Izlesene Video Downloader December 30, 2022
  • Pond5 Video, Images, PSD & illustration Downloader December 28, 2022
  • How to Download Rumble Videos? December 28, 2022
  • Helo Video Downloader December 26, 2022
  • Imageshack HD Image Downloader December 24, 2022
  • Pikbest Video & Photo Downloader December 14, 2022

Categories

  • angularjs (10)
  • c programming (2)
  • Codeigniter (3)
  • HTML (35)
  • Java Problems (4)
  • Javascript & Jquery Problems (74)
  • jquery (14)
  • Laravel 5.8 (15)
  • Laravel 6.0 (9)
  • LARAVEL FRAMEWORK (53)
  • PHP (68)
  • PHP PROBLEMS (82)
  • php program (18)
  • python (24)
  • swift (1)
  • Tools (28)
  • XML (1)

Calculators & Code Minifier Tools

GST Calculator

Square(√) Root Calculator

Prime Numbers Calculator

Area of Circle Calculator

Percentage(%) Calculator

Hexa to Decimal Converter

Binary to Decimal Converter

HTML Minify Tools

Remove Blank Lines Minify Tools

Word Counter

Multiplication Calculator

Learn Programming Blog, Tutorials, PHP, MySQL, JavaScript & JQuery, Ajax, WordPress, Laravel, Web Development, Many Tools and Demos with Experts PHP.powered by Experts PHP

About us|Terms and Condition