I'm using Facebook's Javascript SDK to allow login/logout, and my problem is that when I use their window.fbAsyncInit call to initiate the FB session, it always fires twice. I've included a simplified code sample. I'd appreciate any help!
In the code below, the "2" alert fires a single time, and then the "1" alert fires twice.
<html><head>
<script type="text/javascript">
...some of my own functions, not related to Facebook...
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo FACEBOOK_APPID; ?>',
session : <?php echo json_encode($session); ?>, status:false, cookie:true, xfbml: true
});
alert("1");
FB.getLoginStatus(function(response) {
if(response.session) { ...do stuff... } else { ...do other stuff...}
});
};
alert("2");
(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>
...page contents...
</body></html>
You might accidentally be including two different Facebook javascripts.
Related
I have created a one page that contain the Facebook button like if user liked our page redirect to second page I did all things but I need to check users if they already have been liked our page immediately redirect to second page.
<div id="fb-root"></div>
<fb:like href="https://www.facebook.com/example-page/" send="false" width="450" show_faces="false" font=""></fb:like>
java script
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({appId: 'appid', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function (response) {
window.location = "http://www.example.net/";
}
);
};
(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>
Although I am not new to programming or API's, I'm quite new to facebook API. This plugin uses some facebook code, and it's clearly not working.
I have following code on my registration page. However, the "register using facebook" is not clickable. This is what firebug shows: <fb:login-button scope="email,user_about_me,user_location"></fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $ap_info['appId']; ?>',
status : true, // check login status
cookie : <?php echo $ap_info['cookie']; ?>, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //enables OAuth 2.0
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(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>
All the variables like appId, cookie etc have proper values. I debugged through them.
Have you tried the "official" sample code which is provided here?
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/#quickstart
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>