I have a really simple facebook IFrame app that checks whether the current user is logged into facebook. If they are not I wait 1 second then prompt them to login by opening the login dialog.
This all works perfectly when I run my app in Firefox & in Chrome. But when I run it in Internet Explorer, the Javascript function isLoggedIn() fails/breaks after I use the line
FB.getLoginStatus( function(response) {
Why do you think this happens & do you know how I can fix this? PS: I am using the Javascript SDK of the facebook Graph API.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>IFRame Test</title>
<script type="text/javascript">
function loginUser()
{
alert( "Running loginUser()" );
FB.login( function(response) {
if (response.session)
{
if (response.perms)
{
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
alert( "With perm" );
}
else
{
// user is logged in, but did not grant any permissions
alert( "logged in" );
}
}
else
{
// user is not logged in
alert( "Not logged in" );
}
}, {perms:'read_stream,publish_stream,offline_access'}); // these are the permissions we ask for
alert( "Ending loginUser()" );
}
function isLoggedIn()
{
alert("About to Run");
FB.getLoginStatus( function(response) {
alert( "Running isLoggedIn()" ); // ERROR HERE This line never executes in Internet Explorer
alert( response.status );
if ( response.status == "unknown" )
{
setTimeout( "loginUser()", 1000 );
}
else if ( response.status == "notConnected" )
{
// We dont have permissions but the user is logged in
setTimeout( "loginUser()", 1000 ); // ask for permsissions
}
else if ( response.status == "connected" )
{
// User is logged in & has given my app permissions
}
else { alert( "Weird case" ); }
});
}
</script>
</head>
<body>
<h1>IFRame Test</h1>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<p><fb:like></fb:like></p>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '172889292760575', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
alert( "CONNECTING" );
</script>
<div>
<a href="javascript:isLoggedIn()">ABCD</p>
</div>
<script type="text/javascript">
alert( "javascriptInner" );
isLoggedIn();
</script>
</body>
</html>
Not sure if this will help, but try using:
<script src="http://connect.facebook.net/en_US/all.js"></script>
before
<div id="fb-root"></div>
Then:
FB.init({
appId : '172889292760575',
status : true,
cookie : true,
xfbml : true
});
instead of
window.fbAsyncInit = function() {
FB.init({appId: '172889292760575', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Because FB might be undefined by the time you try to use it
Related
Here's m code :
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '270423476xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri="http://booktrolley.in/beta"
width="530">
Now if you go to my page on : http://www.booktrolley.in/beta/fbreg.php
There's this "Loading" animation that continues to be there, even after the page loads.Why is that so ?
Thanks
You are loading the plugin in a frame but your page's HTML structure is not correct, here's a better approach:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root" > </div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
var wid=$(document).width()-20;
$("#fb").attr('width',wid);
});
FB.init({
appId : 'XXXXXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:registration redirect-uri="http://booktrolley.in/"
fields='[
{"name":"name"},
{"name":"foo","description":"Type foo","type":"text"},
{"name":"bar","description":"Type bar","type":"text"},
{"name":"facebooker","description":"Pick Paul","type":"select","options":
{"coder":"Paul","pm":"Austin","partners":"Cat"}},
{"name":"check","description":"Check this","type":"checkbox"},
{"name":"date","description":"Dec 16 2010","type":"date"},
{"name":"city","description":"Calgary","type":"typeahead","categories":
["city"]}]'
onvalidate="validate"></fb:registration>
<script>
function validate(form) {
errors = {};
if (form.foo !== "foo") {
errors.foo = "You didn't type foo";
}
if (form.bar !== "bar") {
errors.bar = "You didn't type bar";
}
if (form.facebooker !== "coder") {
errors.facebooker = "Pick the geeky one";
}
if (!form.check) {
errors.check = "Check the little box";
}
if (form.date !== '12/16/2010') {
errors.date = "That isn't the launch date";
}
if (form.city.id !== '111983945494775') {
errors.city = "That isn't Calgary, Alberta";
}
return errors;
}
</script>
</body>
</html>
This is what the ancient Egyptians called "a bug"
at the minute I have this:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({ appId:'188492754501683', cookie:true, status:true, xfbml:true });
};
</script>
<fb:login-button perms="email">
login with Facebook
</fb:login-button>
I want to run some code to pull the email aswell, say this:
FB.api('/me', function(res) { if (res != null) { alert(res.email); } } );
When I added this under the call to FB.init(), it was run as soon as the window loaded, which is understandable but not what I wanted.
I want the code to run AFTER the user has clicked the Login With Facebook button, and then successfully logged in, etc.
Can anyone point me in the right direction, I've searched google but can't seem to find anything :/
Thanks in advance, Tom.
you can use the events for this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Facebook Test</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
// user logedin
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:login-button perms="email">
Login with Facebook
</fb:login-button>
</body>
</html>
see http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ for more events you could subscribe to.
updated with full example
I'm using facebook open graph, new api, and i can do this:
<fb:login-button show-faces="true" max-rows="9" perms="email" autologoutlink="true" onlogin="window.location = 'http://www.example.com/facebook/facebook_test/'"></fb:login-button>
but when i read the doc if i need more options in http://developers.facebook.com/docs/reference/javascript/FB.login says i can:
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
but if i need another image for fb button, and if i need another things, i can't find how do that, of in what part of html i can call FB.login, is between tags 'script'?
You need to use Javascript SDK for this. Just wrap that FB.login into some function and call it wherever you want. For example if you want to call it on image click:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
//initializing API
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', 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);
}());
</script>
<!-- custom login button -->
<img src="images/my_login.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
</body>
</html>
i have copied this code from the FB.init documentation:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
...
<!-- facebook JS SDK init -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init(
{
appId: '<?= FacebookHelper::FACEBOOK_APP_ID ?>',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
i placed it just before my </body> tag (as they recommend in the documentation), but i am getting this weird error (i can see via firebug):
b is undefined
[Break on this error] if(!window.FB)FB={};FB.forEach=functio...B.TypeLoader.subclass,FB.TypeLoader);
now, at first, i thought this must be a bug with my code, but the more i think about it, the more i remember hearing about some problems between firebug and facebook javascript. is that the problem, or am i forgetting something?
I think it is because you are including the older version of Facebook Connect. You don't need to include it with the newer JS SDK:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
Also, Facebook recommends placing the asynchronous loading code right after the opening body tag, such as (but it's your call):
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
...
...
</body>
Firebug doesn't seem to be the issue here.
I had a similar problem with FB>UI calls for feed dialogues. My page was loaded via ajax and the UI does not poup. I just disabled the FireBug and it started to work amazingly!. Guess the FB is ambiguous between FireBug vs FaceBook for Mozilla.
Thanks all this issue is due to
<form id="fbform"></form>
<div id="fb-root"></div> is not included before script. you guys can try this code as i wrote.
div id="fb-root"></div>
<script>
//initializing API
window.fbAsyncInit = function() {
FB.init({appId: '298295206936650', 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);
}());
</script>
<script>
//your fb login function
function fblogin(action) {alert('dd');
if(action == 'undefined'){
var action = 'fb_login';
}
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
var user = response;
//alert(user.birthday)
console.log(response)
//alert(user.id+'---'+user.email);
var picture_fb='https://graph.facebook.com/'+user.id+'/picture?width=100&height=100';
// alert(picture_fb);
if (user.current_location != null) {
var city = user.current_location['city'];
var country = user.current_location['country'];
}else{
var city = '';
var country = '';
}
if(action == 'update_fb_pic'){
var email_user= '<?=$this->session->userdata('user_id');?>';
}else{
if(user.email !='' && user.email !=''){
var email_user= user.email;
}else{
var email_user= '';
}
}
$.ajax({
type: 'POST',
url: "<?php echo site_url()?>front/ajax_fb_login",
data: "action="+action+"&fb_user_id="+user.id+"&username="+user.name+"&username="+user.name+"&first_name="+user.first_name+"&last_name="+user.last_name+"&gender="+user.gender+"&email="+email_user+"&avatar="+picture_fb+"&dob="+user.birthday,
success: function(msg){
//alert(msg);
//window.parent.document.location.reload();
window.location= "<?php echo site_url()?>profile"
//$("#fbform").submit();
}
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'email,user_birthday,status_update,read_stream,publish_stream'});
}
</script>
I got error occurred when trying to post to wall on facebook using the below code. It sometimes can post after the first login but always return error later on.
<?php
include_once "include/settings.php";
//include_once "include/messages.php";
if(isset($_GET["access_token"]))
{
$access_token = $_GET["access_token"];
}
//$msg = $msg_en;
?>
<script language="javascript">
function publishToWall(){
var params = {};
params['message'] = 'message';
alert('<?php echo $access_token; ?>');
FB.api('/me/feed', 'post', { message: 'test' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response);
}
});
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
<!--<link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
publishToWall();
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
Why is your <script> tag before <html> tag? Put it inside <head> or <body>.