To put the login with facebook button on your web page you need to first create a facebook app for your web application. Follow the following steps to create the app om facebook.
1. open https://developers.facebook.com/?ref=pf
2. Now on the upper left are of the page you´d see the link app : https://developers.facebook.com/apps
3. on this page click on register as a developer and follow the steps : i.e. accept the terms and condition and now choose a role, coder recommended. and answer the following question :
I. Which programming languages or platforms do you use?
Choose Web (HTML5, CSS3, JavaScript)
II. Where do you host and distribute your apps?
Choose Dedicated hosting
III. Which types of apps do you plan on building?
Choose accordingly. If you have the facebook page for your website then simply you can choose Apps for Pages.
4. Now click on Create New App and fill all the details and when you´d have successfully created the app, you´d see the App Id. Copy it for further steps. and by clicking on edit setting you can upload logo for your app and fill the required details. One thing to be remembered i.e. Disable(Off) sandbox mode to get the users login with facebook.
Now it´s almost done. On clicking login with facebook button it calls FB.login(function(response){ }, {scope: ´email´});
where {scope: ´email´} you can mention the information you want to retrieve from facebook. if you want to retrieve email and full name, just mention email as scope, If you want to retrieve much more then mention it separated by "," . for more information of scopes visit : https://developers.facebook.com/docs
On successful login it calls testAPI().
Following is the javascript code to put on your webpage. and replace the App ID you recently generated while creating the app.
----------------------------------------------------------------------------------------------------------------------------------
window.fbAsyncInit = function() {
FB.init({
appId : ´xxxxxxxxxxxxxxxxx´,
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´) {
testAPI();
} else if (response.status === ´not_authorized´) {
FB.login(function(response) {
}, {scope: ´email´});
} else {
FB.login(function(response) {
}, {scope: ´email´});
}
});
};
(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));
function testAPI() {
console.log(´Welcome! Fetching your information.... ´);
FB.api(´/me´, function(response) {
document.getElementById(´name´).innerHTML=response.name;
document.getElementById(´email´).innerHTML=response.email;
});
}
function fblogin(){FB.login(function(response){ }, {scope: ´email´});}
----------------------------------------------------------------------------------------------------------------------------------
Following is the HTML code for button, You can customize the button , just call the fblogin() defined in javascript with onclick event.
----------------------------------------------------------------------------------------------------------------------------------
<a style="background:none;cursor:pointer;" onclick="fblogin()"><img alt="login with facebook - anyforum.in" src="/images/fblogin.png" /></a>
<div id="name"></div>
<div id="email"></div>
