i am using facebook api to populate a from, it seems work perfectly, the only problem is that i have the form populated only when i refresh the page, there is a way to poulate immedialty? here my code:
HTML:
<li><img src="img/fb_login.png" border="0" alt=""></li>
JAVASCRIPT
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log ('non autorizzato.');
} else {
console.log('accedi a facebook');
}
}
function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
console.log('access_token: '+access_token+", user_id: "+user_id);
FB.api('/me', function(response) {
user_email = response.email; //get user email
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'public_profile,email'
});
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
// ID APPLICAZIONE
window.fbAsyncInit = function() {
FB.init({
appId : 'myid', //SVILUPPO
xfbml : true,
version : 'v2.5'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Carico la SDK in asincrono
(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'));
//compilo i campi
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields:'email,first_name,last_name'}, function(response) {
console.log(response);
console.log('Successful login for: ' + response.first_name);
fb_populate(response)
});
}
function fb_populate(response){
$('#social').val('facebook_'+response.id);
$('#nome').val(response.first_name);
$('#cognome').val(response.last_name);
$('#email').val(response.email);
}
My answer is maybe a little late, but you can try to use the FB.XFBML.parse(); function from the JavaScript SDK.
See: How to force Facebook JS-SDK to render dynamically added widgets?
Related
i'm using javascript sdk and i have already send to review my publish_action , they are approved. Anyway i can't publish my post , the way i require the scope is this:
FB.login(function(response)
{
...
}, {scope: 'email,publish_actions'});
When i try to publish the return error is:
(#200) The user hasn't authorized the application to perform this action
It's true, because in the facebook modal login, appears only the permission to read information of the profile, no the permission to publish. How i can solve?
EDIT
i add my complete code to better explain:
<script type="text/javascript">
/***FACEBOOK***/
function fb_publish_Photo(immaginelink,idfoto){
var testo_share= $("#share_text").text();
var wallPost = {
message: testo_share,
link:immaginelink,
picture:immaginelink
};
console.log(wallPost);
FB.api('/me/feed', 'post', wallPost , function(response) {
if (!response || response.error) {
console.log(response.error);
alert('Failure! ' + response.error + ' You may logout once and try again');
} else {
// alert('Success! Post ID: ' + response.id);
var PostId=response.id;
if(response.id!=null && response.id!=''){
FB.getLoginStatus(function (response) {
if (response.authResponse) {
} else {
// do something...maybe show a login prompt
}
}, {scope: 'publish_actions'});
}
}
console.log(response);
}, { scope: 'publish_actions'});
}
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.
//fb_login();
} else if (response.status === 'not_authorized') {
} else {
}
}
function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me?fields=email,first_name,last_name,name', function(response) {
//chiamata ajax per registrare/loggare l'utente
console.log(response);
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'publish_actions'
});
}
// 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 : 'xxxxxxxxxxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.4' // use version 2.4
});
// 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'));
/***end FB***/
</script>
EDIT
This is the only ref i can find in facebook documentation:
function myFacebookLogin() {
FB.login(function(){}, {scope: 'publish_actions'});
}
or
FB.login(function(){
// Note: The call will only work if you accept the permission request
FB.api('/me/feed', 'post', {message: 'Hello, world!'});
}, {scope: 'publish_actions'});
It seems simple, in login call i have to require permission, so why the publish permission dialog not appears in an approved app?
EDIT
this is a screen of my app permission
Publish_actions scope now seems to works correctly. I had two times scope request.
I am using Facebook Login for the Web with the JavaScript SDK
As from yesterday the tool suddenly stopped working.
When clicking on fb:login-button the popup to login open, but after you enter email and password nothing happens. Until the day before yesterday all worked OK
My code
function statusChangeCallback(response) {
console.log(response);
if (response.status === 'connected') {
signInMem();
} else if (response.status === 'not_authorized') {
//document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
} else {
//document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
cookie : true,
xfbml : true,
version : 'v2.2'
});
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'));
function signInMem() {
FB.api('/me?fields=first_name,last_name,id,email', function(response) {
if (document.getElementById('status')) { document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '! Redirecting...'; }
/* .... */
});
}
in statusChangeCallback function when console response prints
Object {authResponse: null, status: "unknown"}
what happened?
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>";}
}
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>
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...'});