I am trying to integrate Facebook into my webpage so users can update their status from my site. Right now I have a button a user clicks to update their status, the button calls the updateFacebookStatus() function. When this button is clicked right now, a blank white window pops up saying "waiting for www.facebook.com". This window is where it should be asking for permission but the window just times out. Any ideas: Here is my code for the function updateFacebookStatus().
function updateFacebookStatus()
{
//Ask for permissions
FB.login(function(response)
{
}, {scope:'publish_stream, offline_access,manage_pages'});
FB.getLoginStatus(function(response)
{
//If user is logged it and given permissions update status
if (response.status === 'connected')
{
new_status = document.getElementById('FacebookBody').value;
//update status
FB.api(
{
method: 'status.set',
status: new_status
},
function(response)
{
if(response == 0)
{
alert("Your Facebook Status Was Not Updated.");
}
else
{
alert("Your Facebook Status Was Updated");
}
}
);}
else
{
window.location.href = "#home";
}
});
}
In my html file I get the Facebook javascript sdk using the following code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'XXXXXXXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.XXXXX.com/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
// 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>
not sure if it has anything to do with your problem but notice that you call the same script twice - one time via <script src="http://connect.facebook.net/en_US/all.js"></script> tag and the other via async function call under // Load the SDK Asynchronously
Related
I am using following to code to catch event if user have already liked your page but it's not working. It always go to that user has not liked your page.
window.fbAsyncInit = function() {
FB.init({
appId : 'app_id', // App ID
channelURL : 'path', // Channel File URL
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
console.log(response);
if (response.authResponse) {
// logged in and connected user, someone you know
var user_id = response.authResponse.userID;
var page_id = "1457622007810260";
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+ page_id + " and uid= "+ user_id ;
var the_query = FB.Data.query(fql_query);
alert(fql_query);
alert(user_id);
the_query.wait(function(rows) {
alert(rows);
if (rows.length == 1 && rows[0].uid == user_id) {
//user likes the page
//do your stuff here
alert('likes');
} else {
// user doesn't like our page yet
alert('unlikes');
}
});
} else {
// no user session available, someone not known, not logged into fb'
alert('no');
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
and somewhere in html
The user need to grant the user_like permisison. This requires your application to be submitted to and reviewed by Facebook.com
https://developers.facebook.com/docs/facebook-login/permissions/v2.0
If you want to get all the fans of a page, you will need the page_management permission I reckon.
Facebook shows how to do this programmacally on:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0
I want to check if a user is logged in facebook (not necessarily from my site).
when i debug my script i see that it fails to execute FB.getLoginStatus().
I also tried other FB functions, but it seems it doesn't recognize any of them except for FB.init. why do they fail? any help would be appreciated
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
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
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
function GetFBLoginStatus() {
debugger;
window.fbAsyncInit()
alert("get status");
FB.getLoginStatus(function(response) {
alert("inside call back function");
if (response.status === 'connected') {
// var uid = response.authResponse.userID;
// var accessToken = response.authResponse.accessToken;
// alert("Connected FBID = " + uid);
} else if (response.status === 'not_authorized') {
alert("not_authorized");
} else {
alert("Not Logged into facebook");
}
return true;
}, true)
}
</script>
EDIT
You seems to have omitted something important in your code, please, try with this, it works for me:
window.fbAsyncInit = function() {
FB.init({
appId : '', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// logged into the app
alert('logged');
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app
alert('not authorized but logged into fb')
} else {
// not logged into Facebook
alert('not logged');
}
});
};
// 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));
Last thing: pay attentions to "duplicate questions" in few hours
END EDIT
That's your code?
This 'my_app_id'
appId : 'my_app_id', // App ID
it's a value that fb will generate when you will create an app, you need this number before everything.
If you aren't a web developer (needed to create an app), you can go here, after you join the developer team, you can create an app and get your app id. Enough clear?
I'am trying to get the Login button from Facebook to work on my website using the Javascript SDK. If the user is logged on, I get the email address back. This works. But on the page where I have my Facebook Login button, I also have the normal login for my website. (username & password). But when I go to my login page, the page automatically loads the Facebook button and the Facebook login dialog appears. But I don't want to load this button automatically. I want that users always have to press the login button for Facebook. Is this possible?
This is my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID', // App ID
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
FB.getLoginStatus(function(response) {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert('Good to see you, ' + response.email + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
FB.getLoginStatus method is used to know whether user has logged in or not
FB.login is used to prompt login page to authenticate and authorize the app.
you are calling FB.getLoginStatus method and not bothering about the response and firing fb.login button always.
If you always want user to click login button don't use FB.getLoginStatus
Use this code
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.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
});
};
// 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">Login with Facebook</div>
</body>
</html>
FYI: https://developers.facebook.com/docs/guides/web/
check authentication section
I am trying to check if the user is logged in in facebook (and redirect to other page) but I can't open any popup for this:
This will work: but would open a popup in case the user is NOT logged in facebook
FB.login(function(response) {
if(response.status == 'connected')
/*Redirect here*/
});
This is working in another web of mine, but not here
window.fbAsyncInit = function() {
FB.init({
appId : myAppid, // App ID
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.login', function() {
/* REDIRECT 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/es_ES/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Any clue here?
You can use FB.getLoginStatus to get the info you want.
The first time in the current browser session that FB.getLoginStatus is called, or the JS SDK is init'd with status: true, the response object will be cached by the SDK. Subsequent calls to FB.getLoginStatus will return data from this cached response.
Example from documentation:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
Trying to figure out how to use the JavaScript SDK. I'm new to JavaScrip. I was able to use the PHP SDK but want to run my stuff clientside. Anyhoo, I don't really understand the SDK documentation on the develop site. So the base code is:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.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
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
Which I think I understand...it loads the SDK and then runs the FB.init stuff once it loads. I don't know where to put all of the OAuth stuff though, and how to structure the login request (i.e. if not logged in the make a button and if you are then return access token etc.
Can someone hold my hand through this beginning part. I've searched everywhere and I just don't quite get it.
Edit:
Okay, second try with authentication. Didn't work:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXX', // App ID
channelUrl : 'XXX', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me', function(response) {
alert(response.name);
});
} else if (response.status === 'not_authorized') {
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 + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
} else {
}
})
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Thanks!
Just below this line,
// Additional initialization code here
is where the oauth stuff goes.
I would suggest getting used to calling FB.getLoginStatus() first. See: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
EDIT
based upon the question edit above
This should be done inside the window.fbAsyncInit function
FB.api('/me', function(response) {
alert(response.name);
});
and only after you've checked the getLoginStatus() so you know if the person is logged in or not.