HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
1. Feel Free to ask and submit anything on and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.

facebook-login: How to enable login with facebook on my website?

I want to put login with facebook button on my website. I have googled it but i am not able to get successful login. I want to get user´s email and user´s full name. Please help me.

facebook x 2
login x 5
Posted On : 2013-12-16 21:06:23.0
profile Garima Gupta - Garima Gupta


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
2. Now on the upper left are of the page you´d see the link app :
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 :

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() {
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´) {
} else if (response.status === ´not_authorized´) {
FB.login(function(response) {
}, {scope: ´email´});
} else {
FB.login(function(response) {
}, {scope: ´email´});
var js, id = ´facebook-jssdk´, ref = d.getElementsByTagName(´script´)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(´script´); = id; js.async = true;
js.src = "//";
ref.parentNode.insertBefore(js, ref);
function testAPI() {
console.log(´Welcome! Fetching your information.... ´);
FB.api(´/me´, function(response) {
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 -" src="/images/fblogin.png" /></a>

<div id="name"></div>
<div id="email"></div>

Posted On : 2013-12-16 22:10:41
Satisfied : 1 Yes  0 No
profile Saksham Kumar - Saksham Kumar
Reply This Thread
Thanks Saksham. It´s working properly, thank you so much!
profile Garima Gupta - Garima Gupta
596  1295  58962
Posted On :2013-12-16 22:20:11.0
Leave a Comment
Your welcome Garima
profile Saksham Kumar - Saksham Kumar
734  339  39089
Posted On :2014-01-02 17:39:10.0
Leave a Comment

Post Answer
Please Login First to Post Answer: Login login with facebook -