'statusChangeCallback' is not defined Facebook Javascript SDK Login Error - facebook-graph-api

For New Developers who are trying to integrate facebook login and authentication in their websites, they might receive the error if they'll simply try to copy the tutorial from Facebook Help for Developers.
Error is : Uncaught ReferenceError: statusChangeCallback is not defined
Code:
<script>
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function () {
FB.init({
appId: '<Your App ID>',
cookie: true,
xfbml: true,
version: 'v2.12'
});
FB.AppEvents.logPageView();
};
</script>
<fb:login-button scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
<div id="status"></div>

The solution is that new developers are forgetting to write success callback function in their code. The problem occurs when they try to copy the code from Facebook's Guide that comes immediately after Facebook App Registration.
In your HTML define a div with id status <div id="status"></div> just before the <script> tag.
Please include the javascript method below for the API to work. I have written some console.log verbose text. You can delete this text and replace with yours.
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}

Related

Check if user is over 18 using Facebook Graph API

I'm using Facebook to login users to a website. At the moment I'm using the example code by facebook(below). This works fine and returns the user name with a success message but I need to check if they are over 18 or not using age_range graph api call. However I can't work out from the developer docs how to do this. Can anyone help?
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
Figured it out. I changed
/me
to
/me?fields=age_range
Then I get the minimum age range value like this
response.age_range.min
So I can do
if(response.age_range.min >=18){
//if user age range is greater or equal to 18 do something here
}
I hope this is helpful to someone else.

Facebook api undefined issue

THis is my first time trying to use the Facebook javascript SDK so please bear with but I am having issues trying to retrieve an email address from the Facebook API. I have the code below in my site:
<script>
window.fbAsyncInit = function() {
FB.init({`enter code here`
appId : 'my id',
xfbml : true,
version : 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I think I have connected successfully to the api as when I add a like button for testing:
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
it seems to load in all buttons from the api.
WHen I try to retrieve a users name however I get an error message saying "undefined". Here is my code for attempting to retrieve username
jQuery(".test123").click(function(){
FB.api(
'/me',
'GET',
{"fields":"id,name,email"},
function(response) {
alert('Your name is ' + response.name);
}
);
I've doublechecked on the Graph API and it seems im using the correct method so not sure what the problem could be and all other articles i've seen seem to make the same call or something similar and more simple like:
FB.api('/me', function(response) {
alert('Your name is ' + response.name);
});
But nothing has worked for me yet.
You need to authorize the user with FB.login first:
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
}
}, {scope: 'email,public_profile'});
Here´s a tutorial: http://www.devils-heaven.com/facebook-javascript-sdk-login/
...and here´s the official page for FB.login: https://developers.facebook.com/docs/reference/javascript/FB.login/
Without authorization, you can´t get any user data.

facebook connect SDK sample: how to retrieve location and birthday?

I am using the offcial sample from facebook: it works fine, except I cannot retrieve the birthday and location.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me?fields=id,first_name,last_name,gender,location,email,birthday', {fields: 'name, email,gender,first_name,last_name,location,birthday' }, function(response) {
console.log(response);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button show-faces="false" scope="public_profile,email,user_birthday,user_location" size="medium" onlogin="checkLoginState();">Connect with facebook</fb:login-button>
<div id="status">
</div>
</body>
</html>
This works fine but no borthday nor location in response.
I spent a lot of time and it looks that nowdays to retrieve these informations I need to nowdays to REVIEW the application before accessing these data
https://developers.facebook.com/docs/facebook-login/review/what-is-login-review
Is this correct: do I need to submit the application for review or is it something wrong I am doing ?
Yes, it's true, and it's all in the docs:
https://developers.facebook.com/docs/facebook-login/review
https://developers.facebook.com/docs/apps/review
But, if you're using the an admin/tester/developer of the said app, you are able to give and test these permission with your app. Only if third parties will need to access the app, you'll need to pass Login Review.

Client-side access token doesn't function after a server-side call (FB Graph API v2.0)

First, a facebook user is logged client-side with using Facebook JS SDK.
FB.init() is called with the following parameters:
{
version : 'v2.0',
appId: '...',
status : true,
cookie : true,
xfbml : false
}
Then, in PHP, a session is created:
$session = (new FacebookJavaScriptLoginHelper())->getSession();
Once FB API calls have been made from PHP, I still can continue calling FB API from withing js.
But as soon as my page sends a new command to the server instructing it to make an FB API call, it doesn't work the second time, and the FB API says:
An access token is required to request this resource.
Obviously, this is called one more time and after that it stops working:
$session = (new FacebookJavaScriptLoginHelper())->getSession();
If the user updates the page in his browser, the next call from the server will work again. What I want instead is to keep querying FB API from both the server and the browser simultaneously without reloading the page.
It is out of date, but maybe will help someone
<?php
//some code here - requires and uses
FacebookSession::setDefaultApplication($SETTINGS['fbappid'], $SETTINGS['fbsecret']);
$helper = new FacebookJavaScriptLoginHelper();
$session;
try {
$session = $helper->getSession();
} catch(FacebookRequestException $ex) {
//
} catch(\Exception $ex) {
//
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $SETTINGS['fbappid'] ?>',
xfbml : true,
version : 'v2.0',
status : true,
cookie : true
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.login(function () {
FB.api('/me', {
fields: 'id'
}, function (response) {
console.log(response);
});
}, {
scope: 'publish_actions'
});
} else if (response.status === 'not_authorized') {
} else {
}
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<?php
//here url to go to my app
echo "<a href='...'>Sign in to Facebook application</a>";
if ($session) {
echo "<br/>logged in";
}
?>
</body>
</html>
Note that login comes after second access to page if cookies were not set. So ajax request is needed to check properly.

Need help getting my web site to publish info to Facebook wall

SO I am trying to have my web site publish info to a user's facebook page. Where I am now is that I placed the following code (as instructed by another stackoverflow contributor), which is getting executed however the alert with "error occurred" comes up. Do I need to request the publish_stream permission as well? If so, I cannot figure out how to add that to my code. Sorry, I'm not much of a scripter and I have very limited knowledge on doing any integration into facebook. My ultimate goal is to be able to post information to a users facebook page on their behalf (this won't be done without their permission). Any help would be much appreciated:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.XXXXXXXXXXXXXX.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
oauth : true
});
});
// Additional initialization code here
};
// 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>
<SCRIPT language="JavaScript">
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.');
}
});
</SCRIPT>
<SCRIPT language="JavaScript">
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
})
</SCRIPT>
Why don't you expand the error handling a little bit?
alert("Error occured: " + response.error.message);
And did you check the console log for errors? Maybe authentication didn't work.