Develop Reference

Facebook Login Not defining Function

So I found a tutorial on Facebook Login Integration at: http://www.excellencemagentoblog.com/facebook-login-integration-website
I followed it step by step and Google Chromes Developer Tools give me an error after clicking Facebook Login saying:
Uncaught TypeError: object is not a function index.php:53
onclick
The button html is like this:
<a class="btn btn-success" href='#' onclick='login();'>
<i class="icon-facebook"></i>
Facebook Login
</a>
The script is as follows, I really can't tell what is wrong because the function is defined within the script.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : ' 163289720517425', // App ID
channelURL : '', // Channel File, not required so leave empty
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : false // parse XFBML
});
};
// logs the user in the application and facebook
function login(){
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
window.location.href = 'php/fbconnect.php';
}else{
FB.login(function(response) {
if(response.authResponse) {
//if (response.perms)
window.location.href = 'php/fbconnect.php';
} else {
// user is not logged in
}
},{scope:'email'}); // which data to access from user profile
}
});
}
// Load the SDK Asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Not too sure of the problem you're having here....cuz even when I boiled it down to just the function with an alert....it still didn't work???? Meaning it had nothing to do with facebook.
Anyways....this is how I would do it....
You're doing a cross domain request...so you have to register your domain....
Also....FB provides a javascript SDK, so no need to use both PHP and Javascript as you were trying...
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '163289720517425', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms!!
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
$('.btn-success').click(login);
};
// Load the 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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});}

Feeding in Facebook API Error Code 191 - what I am doing wrong?

I just tried,read everything - but somehow I was still not able to manage this problem.
Does anyone have a clue ?
For details look here :
http://i1145.photobucket.com/albums/o501/King_Coatie/notworking.gif

Try loading and initializing the Javascript SDK like it's shown here:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
http://developers.facebook.com/docs/reference/javascript/
You need to provide appID to the FB object for it to recognize which app it's dealing with.

Facebook Login Error (Javascript)

I'm trying to enable Facebook login to my site via Javascript but when the user logs in, the Facebook popup doesn't closes. Instead it shows the following message:
An error may have occurred as part of the login process. You can close this window and try returning to the application, though it may ask you to login again. This is likely due to a bug in the application.
If I click again on the login button, everything works fine.
This is my code:
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
var doLogin = function (response) {
url = '//'+window.location.hostname+'? access_token='+response.authResponse.accessToken;
window.top.location = url;
};
FB.init({
appId : 'MY_APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true,
channelUrl : '//'+window.location.hostname+'/static/html/channel.html'
});
FB.Event.subscribe('auth.login', function(response) {
doLogin(response);
})
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
doLogin(response);
}
}, true);
}

You should try something like this:
https://gist.github.com/3370553
Or you could replace AuthorizeFacebook with "FB.login" from the JS API

Facebook user email id using javascript SDK

I am currently using the following code to get the email id of the user using my app
function get_id(cb){
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.authResponse) {
var token = response.authResponse.accessToken;
alert(token);
accessToken = token;
FB.api('/me?access_token=' + token + '', function (response) {
cb(response.email);
});
}
},{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));
}; // ending of get_id()
get_id(function (email) {
userID=email;
alert(email);
});
the current code is in a separate javascript file and this function is called when a button is pressed , I have also included <script src="http://connect.facebook.net/en_US/all.js"></script> in the HTML file . my browser (google chrome) gives me the following error each time I try and access it
"Uncaught ReferenceError: FB is not defined "
I am relatively new to developing Facebook apps , so all the reference I have is the developers page at facebook , I am sure it is a small error but I just cant wrap my head around it , appreciate it if anybody could point out where I could be going wrong

Your code will not load correctly. This part:
(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));
Should not be inside any function, put this in a script tag, after the body opening. It can't be in a separate file. This only does a async-load of all.js, that is the Facebook's JS SDK. If you are using the async-load, you should not put <script src="http://connect.facebook.net/en_US/all.js"></script> in your document, because this will do a sync-load.
This other part of your code:
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
Also should not be inside the function. This fragment is responsible for starting the FB JS SDK in your page, with your app information, it only have to be called one time for each page, otherwise you will be starting the engine multiple times and it will have a caotic behavior. The "FB" object will only be created after the FB JS SDK loads. You don't know when it's going to happen, because of the async load. So you must assign the FB.init to this window event:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
You want to create a get_id function that uses the Facebook information. You have to be careful with that. With you are sure that this function will be called after the complete load of FB JS SDK, you can create it in any part of your page. BUT I think the most safe way is to create it inside the window.fbAsyncInit. Don't worry about the token, the SDK does it for you:
window.fbAsyncInit = function() {
FB.init({
appId : .......,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function get_id(cb){
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function (response) {
cb(response.email);
});
}
},{scope: 'email'});
}
};
But when you do that, you will be not sure if your function was already created or not. So when you call it, you will have to test for it's existence:
if(get_id && typeof get_id == 'function') {
// It's safe to call your function, go ahead
get_id(function (email) {
userID=email;
alert(email);
});
} else {
// Your function does not exists yet, do other stuff
}
Good luck!

You need to put:
(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));
out of get_id function. So it was called before you press the button
PS: you don't need to pass ?access_token= manually - FB JS SDK does that for you

facebook FB.Event.subscribe('auth.authResponseChange') not working

For the life of me I cant get Event.subscribe('auth.authResponseChange') to work. See code below
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXXXXXXX', // App ID
channelUrl: 'http://XXXXXXXX.us/', // 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) {
alert('The status of the session is: ' + response.status);
});
};
// 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));
</script>
<div class="fb-login-button" data-size="xlarge" scope="email" data-show-faces="false"
data-width="400" data-max-rows="1" autologoutlink="true">
Login with Facebook</div>
The login button renders. and i can logout too. only problem is that the auth.response change is not firing and i am not getting the "message" popup

Your code looks fine.
I would access your Facebook app and check on 2 settings in particular.
Check 'Sandbox Mode' -ensure it's set to 'Disabled'
Check your Site URL and/or Canvas URL -ensure they are set to your domain. (i.e. if you are working on this locally your url should look something like http://localhost:#####/ where ##### is your port.
Hope that helps.

Your fbAsyncInit function is called asynchronously so you won't see any alert messages. Try console.log instead for debugging.