Getting response from facebook login button - facebook-login

Question

I am having problem in getting response from facebook login button.
And will be very thankful for any instant help.
I am using following code:
<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
... but I am getting the error in my javascript console : "FB is not fefined " and no alert message for auth responeId is recieved to me.
Please help its very important

Answer 1

Or if you want to still load the JS SDK async style, you can wire up your event handlers in the window.FbAsyncInit() like such:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
};
<script>
(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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1">
</div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
You can see this style (which is Facebook's preferred style) documented here: https://developers.facebook.com/docs/reference/javascript/

Answer 2

You are loading facebook javascript sdk asynchronously through following code
<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, your FB is not defined until it gets loaded.
Try loading FB syncronously. Put following code and remove the above one,
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>