We Keep Coding

Facebook Login Popup Blocked by Browsers

I am very new to javascript, really dont understand how to do, the Facebook login still blocked by popup blocker in any browsers
I place this code to a file fbapp1.php
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // App ID
channelUrl : '//example.com/fbapp1.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// this shouldn't be called directly, but instead should be initiated with a user click event
FB.login(function(response) {
if (response.authResponse) {
// document.write ('Access Token: ' + response.authResponse.accessToken);
window.location = 'https://example.com/fbapp2.php?access_token=' + response.authResponse.accessToken;
} else {
alert ('User cancelled login or did not fully authorize.');
}
});
};
// 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>
And to open this file i am using simple html href code in another page
"Pulsa Fortune App"
But the Facebook login popup always blocked by the browsers. The code above already told this thing, but i dont know what its mean?
this shouldn't be called directly, but instead should be initiated
with a user click event
Please tell me how my code should be?

Do not call FB.login in an asynchronous callback function - fbAsyncInit is asynchronous. You have to call it on user interaction or browsers will block it for a good reason.
Example:
document.getElementById('loginBtn').addEventListener('click', function() {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
getUserData();
}
}, {scope: 'email,public_profile', return_scopes: true});
}, false);
Source: http://www.devils-heaven.com/facebook-javascript-sdk-login/

FB.getLoginStatus's callback isn't firing

I have the following code in a script tag in my HTML page:
window.fbAsyncInit = function () {
if (FB != null) {
FB.init({
appId: 'myAppID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.getLoginStatus(function (response) {
console.log("callback");
}, true);
}
};
(function () {
var e = document.createElement('script'); e.async = true;
var protocol = "http:";
if (document.location.protocol == "https:")
protocol = "https:";
e.src = protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
The page is loaded in an Android WebView from a domain matching the registered one in FB's app settings.
For no apparent reason, the callback no longer fires. It worked just yesterday, but today it doesn't work, without me changing any code or app setting.
I placed a console.log() call before the getLoginStatus call, and it seems that the call itself is reached and executed; also I can see that some files are loaded from static.ak.facebook.com. It's just that the callback isn't called.
The application is not in a Sandboxed mode, which seemed to have caused this behavior for others.
I should also mention that the same code works perfectly in a standalone browser (desktop & mobile).
What gives?

Uncaught ReferenceError: FB is not defined when using FB.getLoginStatus

I'm trying to check if a user has logged in using facebook and get that error in JS console. My code looks like this:
<div id="fb-root"></div>
<script>
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
});
};
// 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));
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.
}
});
</script>
What could be the problem and are there any sugestions on how to fix it?

In Chrome, you'd be getting the error: Uncaught ReferenceError: FB is not defined.
I like to trigger a custom event in Facebook's initialization function, fbAsyncInit().
Then I'm not limited to doing all my FB related scripting inside of the fbAsyncInit function. I can put it anywhere, by just listening for that custom event to be fired.
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true
});
$(document).trigger('fbload'); // <---- THIS RIGHT HERE TRIGGERS A CUSTOM EVENT CALLED 'fbload'
};
//MEANWHILE IN $(document).ready()
$(document).on(
'fbload', // <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
function(){
//some code that requires the FB object
//such as...
FB.getLoginStatus(function(res){
if( res.status == "connected" ){
FB.api('/me', function(fbUser) {
console.log("Open the pod bay doors, " + fbUser.name + ".");
});
}
});
}
);

You are calling FB.getLoginStatus before the SDK is loaded and/or initialized. To wait for that, that’s what the fbAsyncInit event is for. So put the method call in there.

I used the following simple approach and it works correctly:
In the head section I load the SDK:
<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>
Then in the body of your page where your actual content is, I used this:
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
statusChangeCallback2(response);
}, {scope: 'public_profile,email'});
} else {
alert("not connected, not logged into facebook, we don't know");
}
}
function statusChangeCallback2(response) {
console.log('statusChangeCallback2');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log('still not authorized!');
} else {
alert("not connected, not logged into facebook, we don't know");
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
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 + '!';
});
}
$(document).ready(function() {
FB.init({
appId : '1119999988888898981989819891',
xfbml : true,
version : 'v2.2'
});
checkLoginState();
});
</script>

Simply using script with facbook sdk directly in tag
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID" id="facebook-jssdk"></script>

We were facing the same issue, and since FB sdk was not loading (or loading with delays) this was causing problems (or breaking javascript)in some cases which were dependent upon that.
To resolve this issue, we delegated all the calls related to facebook.
We created a function like :
function callOnFBSDKLoad(callback){
if (window.isFBInitialized) {
callback();
}
else {
jQuery(document).bind('fbInitialized', callback);
}
}
Where fbInitialized is a custom event learn more about custom events here.
And window.isFBInitialized is a variable set when SDK is loaded.
callback is the method enclosing FB related events.
e.g.
var FBLogin = function(){
FB.login(...);
}
callOnFBSDKLoad(FBLogin)
PS:
Please ignore syntax and naming conventions, I am basically sharing the idea to resolve such issues.

A simpler and solid solution. Call a function when the SDK loads. I will name it triggerLoginCheck().
<script>
window.fbAsyncInit = function() {
FB.init({
//TO DO: Add your unique Facebook app ID (All numbers).
appId : '***unique_app_id***',
cookie : true,
xfbml : true,
version : 'v2.8'
});
//Call the function here
triggerLoginCheck();
FB.AppEvents.logPageView();
};
(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>
Later, anywhere, place this:
function triggerLoginCheck() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
console.log(response);
});
}

It's work fine for me. Is necessary include the Object "Log.info.bind".
var Log = { info: { bind: function(){ alert('Hi'); testAPI(); } } }

Fb.api undefined user

I have the following problem:
Once the user is logged in facebook if I run the following code:
FB.api('/me', function(user) {
alert(user.name);
});
It pops up an alert with "Udefined" written.
But if I change the code in the following way:
FB.api( /[MY_REAL_FACEBOOK_ID], function(user) {
alert(user.name);
});
It response in the correct manner.
How it is possible ?
Why '/me' never works ?

I think you might be querying "/me" in context of the app rather than the user. The documentation is not as explicit as it could be, but I've had the same issue.
Are you able to use FB.getLoginStatus?
After I have FB.init set up, I make a call to FB.getLoginStatus similar to what is found below. There might be a better way on how to do this, but it works for me.
Hopefully this helps:
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
graphUrl = "https://graph.facebook.com/me?access_token=" + response.session.access_token + "&callback=displayUser"
var script = document.createElement("script");
script.src = graphUrl;
document.body.appendChild(script);
} else {
// no user session available, someone you dont know
}});
function displayUser(user) {
alert(user.name);
}

Use the below code to overcome the Undefined problem:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : your_app_id,
status : true,
xfbml : true
});
// Additional initialization code such as adding Event Listeners goes here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("connected");
connecter=true;
FB.api('/me', function(user) {
alert(user.name);
alert(user.first_name);
alert(user.last_name);
alert(user.email);
});
}
});

How to Request Permissions in the new Facebook JavaScript SDK?

I'm trying to switch over to the new Facebook JavaScript SDK from the old JavaScript library (where I was using Connect) and I'm unable to get the permission dialog to appear. I'm trying to get the permission dialog that's shown under the "Data Permissions" section here.
My old call was this (with appropriate initialization):
FB.Connect.showPermissionDialog('publish_stream');
I tried changing to this (again, with appropriate initialization) but it's not working, it runs without error but the callback is never run:
FB.login(function(response)
{
if (response.session)
{
if (response.perms)
{
alert('user is logged in and granted some permissions: ' + response.perms);
}
else
{
alert('logged in but didnt grant permissions');
}
}
else
{
alert('not logged in');
}
},
{perms:'publish_stream'});
This is the initialization code I'm using:
window.fbAsyncInit = function()
{
FB.init({appId: 'xxxxxxxx', status: true, cookie: true, xfbml: true});
};
(function()
{
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

After MUCH tinkering around with the code trying to get this to work I finally found out where the error was. The JavaScript code needs to be place at the end of the HTML, near the </body> tag. I moved it there and everything worked!