We Keep Coding

Log in with Facebook, get data and store it in MySQL database if they don't exist

I made a Facebook log in with javascript sdk.
I can get name and id and picture but can't get email.
I am sending name with ajax to php so it can be inserted in database but it inserts empty fields.
So my question is how to insert name into database and how to get e-mail.
This is my js code:
// 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', function (response) {
console.log(JSON.stringify(response));
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
getUserInfo();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_photos,user_videos'});
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
document.getElementById("status").innerHTML+=str;
});
}
function getUserInfo() {
FB.api('/me', function(response) {
var str="<b>Name</b> : "+response.name+"<br>";
str +="<b>Link: </b>"+response.link+"<br>";
str +="<b>Username:</b> "+response.username+"<br>";
str +="<b>id: </b>"+response.id+"<br>";
str +="<b>Email:</b> "+response.email+"<br>";
str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";
str +="<input type='button' value='Logout' onclick='Logout();'/>";
document.getElementById("status").innerHTML=str;
var username_fb = 'response.name=' +response.name;
$.ajax({
url: "check_user_fb.php", //This is the page where you will handle your SQL insert
type: "get",
data: "username_fb=" + username_fb, //The data your sending to some-page.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
}
<div scope="public_profile,email" onclick="Login();">
Login
</div>
This is my php:
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
global $return;
if (insertIntoDatabase()) {
//return "Data inserted successfully!";
echo json_encode($return);
} else {
echo json_encode($return);
}
}
function insertIntoDatabase() {
// Function that inserts username, password and email defined by user into database
global $return;
//Connect to a database
include 'includes/database.php';
// Sanitize inputs
$username = $_POST['username_fb'];
//Insert fields into database
$sql = "INSERT INTO users (username) VALUES ('$username')";
(mysqli_query($link, $sql));
// close connection
mysqli_close($link);
}

try these...
FB.api('/me',{ locale: 'en_US', fields: 'name, email, first_name, last_name, gender, link,username,id,age_range' }, function(response) {
var str="<b>Name</b> : "+response.name+"<br>";
str +="<b>Link: </b>"+response.link+"<br>";
str +="<b>Username:</b> "+response.username+"<br>";
str +="<b>id: </b>"+response.id+"<br>";
str +="<b>Email:</b> "+response.email+"<br>";
str +="<b>Age range:</b> "+response.age_range+"<br>";
str +="<b>First Name:</b> "+response.first_name+"<br>";
str +="<b>Last Name:</b> "+response.last_name+"<br>";}
}

Post to multiple user walls in facebook

So I have been going through the facebook developer documentation and I have managed to get to a point where the user clicks the facebook login button and gives me publish permissions. Then my function will post something to their wall.
My question: Is their a way for my facebook app to post to the walls of all the users who have given my app publish permissions, using either the javascript sdk or the php sdk.
My current code:
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
console.log(response);
},{scope: 'publish_actions'});
} else {
FB.login(function(response) {
console.log(response);
},{scope: 'publish_actions'});
};
});
function postAPI() {
var body = 'We are testing the ability of posting on users behalf.';
FB.api('/me/feed','post',{message:body},function(response){
if (!response || response.error) {
alert('Error occurred');
} else {
console.log('Post ID: ' + response.id);
};
});
};

facebook login dialog is not loading

Does anyone know why the Facebook login dialog is not loading on my website..?
As you will see below I have the FB.getLoginStatus inside another function outside window.fbAsyncInit, and calling it from my login button.
No errors appear over the cconsole window..!
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '503635172990168', // App ID
channelUrl : '//http://www.angeloscleanthous.com/chat/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
});
};
function doLogin(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
login();
} else {
login();
}
});
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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>
-------------HTML PART------------(Login button)
<button onclick="doLogin();" class="classname">Login</button>

Facebook app not showing updated permission

I have created a facebook app with following permissions:
emailuser_birthday
user_education_history
user_hometownuser_likes
friends_birthday
friends_education_history
friends_hometown
friends_likes
And when I click preview login dialog, I see:
all the permissions
But when I use to access the app through my Javascript code,
<html>
<body>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '483353595041064', // App ID
channelUrl : '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 init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Welcome");
} else if (response.status === 'not_authorized') {
login();
} else {
// not_logged_in
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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>
</body>
</html>
I can see only basic info under permission:
Why do the permissions in preview box do not reflect in actual login box?

This is because you didn't set the permissions while login (in your code). Try this-
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
},{scope:'email, etc...'});

Facebook login function doesn't executes anything after the login itself

In the following code, I try after the login to execute ajax and redirect,
What is utterly weird is, that it logs me in, but anything that comes after the FB.login is ignored!
also I use this exact code in another site and it works fine, withe the ajax and the redirect.
The call to facebook api as asynchronous, and is not included here (it works)
$(".joiner").live("click", login);
var button = document.getElementById('fb-login');
window.fbAsyncInit = function() {
FB.init({appId: '0000000000000000', status: true});
FB.getLoginStatus(function(response) {
if (response.session) {
console.log('User is logged in.');
FB.api("/me", handleMe);
}
else {
console.log('User is not logged in.');
}
});
};
function login(){
FB.login(function(response) {
if (response.session) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
type: 'GET',
url: 'www.url.com',
data: "uid=" + response.id + "&name=" + response.name + "&gender=" + response.gender,
success: function(){
console.log('Ajax successful.');
window.location = "www.url.com";
},
error: function(){console.log('Ajax failed.');}
});
}

I had this problem some time ago. I could solve it with seting the right url in the facebook app configuration and running the script from this url. It does not work when you try to make a login from, for example, your localhost with a diffrent url setting in the app config.
there is an respone showing the error code, but not response.session.