Facebook connect logout using link - facebook

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>

Related

Facebook redirection after login

I googled for nearly 4 hours and am posting this.
I am trying to implement facebook login in my website.
The problem is login is working fine, after login it has to redirect to anther custom page,
its not redirecting but staying in the same page. Here is my code that am using.
<head>
<title>My Facebook Login Page</title>
<script src="//connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button perms="email"></fb:login-button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function() {
window.location = "about_us.html";
});
};
(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>
<!-- <div class="fb-login-button" >Login with Facebook</div> -->
Kindly guide me where am wrong also if possible correct code
I had taken the code from below link.
Redirect after clicking on the Facebook login button, even if already logged in Facebook
Thanks in advance.
you can just add this somewhere
FB.login(function(response) {
if (response.authResponse) {
window.top.location = "http://www.foo.com";
}
});
When I put
window.top.location = "http://www.foo.com";
under
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
window.top.location = "";
});
it worked.

facebook javascript sdk login dialog flashes if already logged in

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 can I get a notification when the user logs out from facebook.com?

The user is logged in to my site using the latest PHP SDK.
If the user clicks the facebook logout URL that appears in my site, he logs out from facebook and is redirected back to my site where I can do some cleanups.
However, if while in session (in my site and in facebook) the user goes to www.facebook.com and logs out from there, my site is clueless about it. I need to be notified about this in my site so I can do cleanups.
The only solution I can think of is to call from every page in my site to getLoginStatusUrl(), but this seems to be an overkill. Isn't there a way to ask facebook to call some URL in my site when the user logs out from facebook itself?
You can use js to subscribe to the auth.logout event as per the facebook example:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
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.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

How to get open graph Facebook Like buttons to show?

I have implemented Facebook Open Graph Protocol Full Integration following the Facebook developers site and here http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
I got the Facebook Like Buttons to show here http://giantmango.com/news using
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="200" action="like" colorscheme="light"></fb:like>
On the same domain, I am using the exact code, but on a different theme and the Facebook Like Buttons are not showing here http://giantmango.com/testartwork-2237
Any ideas on how to solve this problem would help very much.
It looks like you are missing your Facebook javascript initialization code.
<div id="fb-root"></div>
<script>
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>

Facebook Multi Friend Selector Doesn't Render (iFrame application)

I have an iframe Facebook application (using Facebook's new JavaScript API) that needs to allow the user to invite their friends to the app after entering a contest. I have the following markup in a div on the page (application name and Canvas Url redacted):
<fb:serverFbml>
<fb:request-form
method="POST"
invite="true"
type="{Name of My Application}"
content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>'
label="Authorize My Application">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application.">
</fb:multi-friend-selector>
</fb:request-form>
</fb:serverFbml>
From what I understand, if you need to use FBML tags in an XFBML/iframe app, you just drop them into an fb:serverFbml element and Facebook takes care of it. Sure enough, my first impressions seem to be false. Instead of dropping in the form, I just get an empty white box, with the fbml seemingly untouched.
The design of this application assumes (probably incorrectly) that I don't need to authenticate the user to let them invite their friends. Is there a way to accomplish this, or do I need to require them to log in first? Facebook's documentation is (of course) vague on this.
EDIT: My FB.init() as requested:
$("body").prepend("<div id=\"fb-root\"></div>");
FB.init({
apiKey: "{My apiKey is here}",
appId: "{My appId is here}",
status: true,
cookie: true,
xfbml: true
});
Ok, I got it to work. Here is how it looks for me :
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
and the JS injection code looks like this :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID HERE',
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>
So,
1) You dont need your APP KEY, only your APP ID in the JS code.
2) The XFBML needs to be wrapped inside a SCRIPT tag.
This example works too:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Set APP_ID in http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1