I'm using Facebook PHP SDK v2.1.2 and JS SDK on my page. I've put a <fb:login-button autologoutlink="true"></fb:login-button>
[...]
<head>
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.init({
appId: '{$appId}',
cookie: true,
status: true,
xfbml: true
});
FB.Event.subscribe('auth.logout', function (response) {
alert('Bye!');
window.location.refresh();
});
</script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button autologoutlink="true"></fb:login-button>
[...]
When I'm logged I can see the logout button, but when I click on it nothing happens. Am I missing something? I use the <fb:login-button> on logon and it works like a charm with PHP SDK!
Thank you in advance.
Instead of
window.location.refresh();
Try
window.location.reload();
Related
the facebook javascript sdk login dialog just flashes (i.e shows then hides) if the user is already logged into FB. Is there anyway to stop this from happening or is my code below not quite right?
<div id="fb-root">
</div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
};
function connectToFB() {
FB.login(function (r) { alert('connected'); }, { scope: 'user_photos' });
}
</script>
<input type="button" value="connect" onclick="connectToFB();" />
You should check if the user is logged in with getLoginStatus() first. Here is the official Facebook Documentatin: FB.getLoginStatus
How do we create a link to initiate the FB connect process WITHOUT using one of their built in button forms <fb:login-button ></fb:login-button>
Just add an onclick event to any of your custom buttons and have it call the FB.login event in their javascript sdk.
Full example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Custom Login Button
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: '**yourAppId**', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session) {
FB.api('/me', function(response) {
alert('Welcome ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:''});
}
</script>
</body>
</html>
Currently I have the following button, when using facebook javascript:
and I want to get this one:
What should I change?
Currently the way I did this is using the following code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
With Facebook PHP-sdk you can replace it with any button or icon
<?php if ($me) { ?>
<img src="logout-image.png">
<?php } else { ?>
<img src="login-image.png">
<?php } ?>
Or http://fbrell.com/xfbml/fb:login-button
For that particular button, you will have to include the image yourself and bind the functionality with one of the SDKs available:
http://developers.facebook.com/docs/sdks/
I personally prefer using the JS SDK to open the login prompt.
You can use regular login button, which is the approach that #MNVR has described in his answer.
Just replace the text "Login With Facebook" with "Connect With Facebook" in your login button code. Or use the below code.
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<fb:login-button>Connect with Facebook</fb:login-button>
<script>
FB.init({
appId: '123456',
cookie: true,
status: true,
xfbml: true
});
</script>
As we know that Facebook has introduced iframe Tabs for Pages. I have developed an application and added the tab of the application in a profile page, application tab is opened in an iframe according to the update "iframe Tabs for Pages". The problem is that height of the page is not adjusted and unable to remove the scrollbars to display the fully page without scrollbars. All the solutions which I found work for the Application canvas page but not for the Application Tab page.
How can we do that?
It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".
Now, on your server, you have to add the following code before the </BODY> tag:
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setSize();
</script>
This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.
The following guide helped me through the same problem:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/
In short, do the following:
Change your "IFrame Size" to "Auto-resize"
Load Facebook's Javascript SDK
add the following code just before the </body> tag of your index page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
Use FB.Canvas.setSize()
Put the following code before the </head> tag:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
That should do it, hope it helps!
facebook recently changed something, now your tab file also needs the fb.init method. otherwise the resize wont work. so use this in your tab page as well
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}
</script>
Updated code for everyone having issues:
1) Set your application "Canvas Height" to "Fluid".
2) Copy + paste the following code before the closing <body> tag.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Called when FB SDK has been loaded
window.fbAsyncInit = function () {
// Initialize the FB javascript SDK
FB.init({
appId: '[YOUR APP ID]',
status: true,
cookie: true,
xfbml: true
});
// Auto resize FB Canvas
FB.Canvas.setAutoGrow();
};
// Load the FB 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>
Hey guys... I was having problems with it as well.. i have tried a myriad of solutions and suggestions and they never worked for me. After I changed the jquery library 1.6 to the 1.5.1 it worked. Check if that is your problem.
Now I am trying to know why the hell it does not work with the version 1.6 of jquery.
For anyone like me who tried all of the above to no avail, here's what finally worked for me. Taken from this page: https://www.facebook.com/note.php?note_id=10150149060995844
Before </head> :
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
</script>
Then before </body>:
<script type="text/javascript">
FB.init({
appId: 'XXXXXXXXXXX', //Your facebook APP here
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
</script>
Customer can sign in to my web app via normal login and facebook connect. So far so good.
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button> <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<xsl:value-of select="$FACEBOOK_APP_ID" />', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
But when they come to logout, I want the customer to click on the logoff link at my website. How can I programmatically logout facebook connect? Possibly via json backend?
I don't want customer to click facebook button to logoff.
I did try out with some ways, example: to reset the facebook connect cookie created at my website and it works, but when I try to login to facebook again at second time, it fails.
I know delete cookie logout is simply not clean (fb autologoutlink=true is still showing I haven't logout.)
I can't let customer to click logout twice, I want them to use my web app logout link as a single logout controller.
I am using ASP classic. Any solution?
If the user has logged in via Facebook, call this JS snippet when the user logs out of your site (depending on how you implement logout, one possible way is to use onclick="", or if you redirect to the "logged out" template, include it there):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.logout(function(response) {});
};
(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>
You can use this simple code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APPID HERE', cookie:true,
status:true, xfbml:true
});
</script>
and this:
<fb:login-button autologoutlink="true" length="short" background="white" size="large" data-show-faces="true" perms="email,user_birthday,status_update,publish_stream">Login with Facebook</fb:login-button>