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
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>
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
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.
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>