I have implemented a facebook login on my website, and authentication works fine. I can access my users name, but nothing else implying my permissions are not working correctly. I have tried a few fixes and looked around, but it seems like nothing is fixing it :/ Here is my code:
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="true" data-auto-logout-link="false" data-scope="public_profile,email,user_friends" onlogin="checkLoginState()";>
</div>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
loggedIn();
} else if (response.status === 'not_authorized') {
//User is logged into FB, but not my app
} else {
//User is not logged into FB
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'ID',
cookie : true,
xfbml : true,
version : 'v2.2'
});
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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
If anyone could lend a hand that would be great :)
Thanks!
i see you have a LoggedIn(); but its not declared anywhere in your code yet
so do just that can call the FB.api from there.
Heres how:
*create LoggedIn(): I recommend after your checkLoginState();
function LoggedIn(){
FB.api('/me),function(response){
console.log(JSON.stringify(response));
});
}
//i assume u have firebug running, so from here u can view the info u asked permission for.
//Note that if you're running on local host, it will ony show ur id and name
to get other, you would have to display them manually: like this
FB.api('/me', {locale: 'tr_TR', fields: 'id,name,first_name,last_name,gender,age_range,link,locale,email'}, function(response) {
console.log(JSON.stringify(response));
console.log(response.name);
console.log(response.email);
});
Hope this is clear enough
Read up:
https://developers.facebook.com/docs/facebook-login/web#steps
Related
I am trying to embed the Facebook login functionality to grant users access to my website. My issue is that the script auto-triggers the login (and the redirect to the "/views/test_view.php") but I only want this triggered when someone clicks the facebook button.
As you can see in the code I tried to add a on-click event and override the standard function in the login button but it didn't work.
Any ideas on how to change the script to only be executed "on click" would be greatly appreciated! Thanks!
<script>
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.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: '1783721038549063',
xfbml: true,
version: 'v2.6'
});
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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
window.location.href = "/views/test_view.php";
};
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {};
function wait() {
console.log("wait called");
}
}
</script>
<fb:login-button id="facebook" auto_logout_link=true scope="public_profile,email" size=large onlogin="wait():">
</fb:login-button>
<div id="status">
</div>
Found the solution:
first load the FB api
them wrap everything else in the onclick listener
window.fbAsyncInit = function() {
FB.init({
appId : '1783721038549063',
xfbml : true,
version : 'v2.6'
});
};
(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'));
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
}
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.
FB.login(function(response)
{
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.
FB.login(function(response){
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
});
}
}
function testAPI() {
window.location.href= "/views/landing_view.php";
}
</script>
I have created an app on Facebook. I want to refer that app to a friend so for that I want to display the list of friends. I'm getting only user info but not the friend list.
I have used the below code, please help me get the friend list.
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.4'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me?fields=first_name', function(data) {
var welcomeBlock = document.getElementById('fb-welcome');
welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
});
}
}
FB.getLoginStatus(function(response) {
// Check login status on load, and if the user is
// already logged in, go directly to the welcome message.
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {scope: 'user_friends, email'});
}
});
};
(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 getFriends() {
alert("in friends");
FB.api('/me/friends', 'GET',{},
function(response) {
if (response.data) {
console.log(response.data);
$.each(response.data,function(index,friend) {
console.log(friend.name +'has id:'+friend.id);
// alert(friend.name);
});
} else {
alert("Error!");
}
});
}
You don't even request the friends in your code. Since Graph API v2.0, you'll only receive the friends which are also using your app, and not all friends.
Use
FB.api('/me?fields=first_name,friends', function(data) { ... });
In App Friends
FB.api("/me/friends",function(res) {
console.log(res)
});
doc
Inviable Friends(only in Game)
FB.api("/me/invitable_friends",function(res){
console.log(res)
});
doc
I am using the Facebook SDK to retrieve the current logged in user on Facebook and output their name and e-mail address.
The issue I am having is when a user visits my page their name and e-mail address is automatically being displayed. I would like this to only happen if they click the Facebook log-in function.
My JS is:
function statusChangeCallback(response)
{
if (response.status === 'connected') {
updateUIWithFacebookFields();
}
}
function checkLoginState()
{
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function()
{
FB.init({
appId : 'snipped',
cookie : false,
xfbml : true,
version : 'v2.1'
});
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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function updateUIWithFacebookFields()
{
FB.api('/me', function(response)
{
var registerUsernameElm = document.getElementById('username');
var registerUserEmailElm = document.getElementById('useremail');
if(registerUsernameElm)
{
registerUsernameElm.value = response.name;
}
if(registerUserEmailElm)
{
registerUserEmailElm.value = response.email;
}
});
}
And my button code is:
<fb:login-button scope="public_profile,email" size="large" onlogin="checkLoginState();"></fb:login-button></span>
How can I only have this run when the button is clicked?
Wow, I'm surprised nobody wanted to answer this. I had this same problem just a few minutes ago and searched for the same question. Since I find no answer to our exactly the same question, I tried to experiment on my own. So here is what I came up with but using your own example:
On this part of your code:
window.fbAsyncInit = function()
{
FB.init({
appId : 'snipped',
cookie : false,
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function(response)
{
statusChangeCallback(response);
});
};
I just removed the part FB.getLoginStatus since this will be called when you press the button. So your code becomes:
window.fbAsyncInit = function()
{
FB.init({
appId : 'snipped',
cookie : false,
xfbml : true,
version : 'v2.1'
});
};
That's it!
It was a simple solution that I can think of so I'm not sure if it is the best practice. Since this question is 2 months old, you probably found your own solution by now, kindly to share what you did so I can be assured if what I did is correct. Thanks!
I wish to track users which were presented with the Facebook Login dialog popup, and chose to close it (by clicking "cancel" or just closed the popup window).
I am using Facebook SDK and invoking FB.login()
From the docs it's unclear, but it does appear there might be some way to track this, so, if anyone here knows how, or can help, it would be appriciated. Thanks!
complete code:
var facebook = (function(){
// Configuration
var serverDomain = '365scores.com',
appID = '158698534219579';
// 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'));
window.fbAsyncInit = function(){
FB.init({
appId : appID,
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
FB.getLoginStatus(FBLoginStatus);
FB.Event.subscribe('auth.authResponseChange', FBLoginStatus);
};
function FBLoginStatus(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.
//connected(response);
$(document).trigger('connection', ['facebook', response]);
}
else if( response.status === 'not_authorized' ){
// The person is logged into Facebook, but not your app.
}
else{
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
}
};
function checkLoginState() {
FB.getLoginStatus(function(response) {
FBLoginStatus(response);
});
}
function connected(res){
console.log( res )
console.log('FACEBOOK CONENCTED');
/*
FB.api('/me', function(response){
});
*/
}
return FBLoginStatus;
})();
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.');
}
});
I am attempting to use Facebook's Javascript SDK to get a user's login status when my page is displayed.
The code I am using is as follows:
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to log in!');
}
});
I go through the Facebook initialization without problems, and the FB.getLoginStatus() function gets called, but apparently the Facebook server does not respond. I do not receive a response of any kind.
I did put my application's ID into the initialization function, and the initialization code is downloaded from Facebook. I am debugging on Firefox using Firebug, so I know the initialization is successful and the FB.getLoginStatus() call is being made. I am simply not getting the response back from the server.
Can anyone suggest any reasons why I am not getting this response? If so, please advise.
ADDITION:
In response to Sahil Mittal's request, the entire code is provided below. It should be noted that there really isn't much more to see...
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXXX,
status : true,
xfbml : true
});
};
(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'));
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to Log In');
}
});
</script>
<body>
<div id="fb-root"></div>
...
</body>
credit for this answer should go to CBroe. I wish that CBroe had put this as an answer so that I could give proper credit.
Nevertheless, the answer to this question is to place all FB functions inside the window.fbAsyncInit() function, as in the following example:
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXXXX,
status : false,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('Logged in');
} else {
alert('Need to Log In');
}
});
};
This is not well documented on Facebook (what else is new???), so I am posting this so that other Facebook newbies can avoid the frustration and delay that I experienced.
Again: thanks should go to CBroe for this answer.