Facebook is a popular social media. Most of the website provide login with facebook feature, why because each and every user over internet have facebook account. So login with facebook feature avoid filling a new signup form on a new website.
Login with facebook is simple and secure as the api is given by facebook only.
1. Go to facebook and create an App, follow below steps:
Go to https://developers.facebook.com/ , in My Apps click on Create New App, then select Website from below screen. 
In HTML put a reference of this JS file and write below code:
Login with facebook is simple and secure as the api is given by facebook only.
1. Go to facebook and create an App, follow below steps:
Go to https://developers.facebook.com/ , in My Apps click on Create New App, then select Website from below screen.
Now type App name and click on “Create New Facebook App ID”
You can see App id in below screen. Also you must enter your website url in order to allow user to login to your website.
Now write below code for facebook login:
*Remember only public features will be access by facebook api. Public features like user name, emailid, gender, location
Create a JS file and write below code in that file:
window.fbAsyncInit = function() {
FB.init({
appId: ‘APPID’, // Set YOUR APP ID
channelUrl: ‘http://www.sharepointcafe.net/fhchannel.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’, { fields: ‘name,email’ }, function (response) {
var profilepic = “https://graph.facebook.com/” + response.id + “/picture?type=normal”;
//Do your action here, call a java script or a web method/service to do more.
});
}
function getPhoto() {
FB.api(‘/me/picture?type=large’, 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));
<a href=”#” id=”fb-login” onclick=”Login();”>
<img src=”../Images/fb-login-btn.png” /></a>
In next blog, I will write about Authenticating Facebook and get user data using C# code
In next blog, I will write about Authenticating Facebook and get user data using C# code
