facebook connect and disconnect - facebook

im using this code to create a facebook connect button on my site:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
apiKey: 'xxxxxxxxxxxxxxxxxxxMQTQ2DshKBkNG4aAZDZD',
appId : 'xxxxxxxxxxxxxxxx', // App ID
channelUrl : '//www.xxx.net/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function logOut(){
FB.logout();
}
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<a href="#" onclick="logOut();" >Logout</a>
when i hit the login button , im loggin in but when i hit the logout link
i get disconnected from facebook (not from the app itself)
and then when i do the following:
1. log in again (directly on facebook.com )
2. go to my site
3. hit the login , and it sais im alread connected to the app
what am i doing wring here ?

If I understand this correctly, you are expecting to get disconnected from the app as well? That is not how it works. When you authorize an app, it will stay authorized unless you remove it from the authorized list in FB. Logging out will only log you out of FB.
When you login to FB, as your app is authorized already, hitting the login button goes to FB sees that its already authorized, tells you so.

Related

Mobile Safari Facebook Login Redirect Issue - Javascript SDK

The Javascript SDK is working for every browser on my desktop, but I'm having issues with Safari on an iPhone.
Here's what happens:
- I click Login
- Facebook Oauth opens in a new window, and I successfully login
- The Facebook Oauth Window closes, and the old window shows up
- Rather than refresh the login page (as desktop browsers do), nothing happens...
So I'm successfully logged in, but the old page shows up. The user thinks that they're not logged in. I've seen similar issue son stack overflow but no answers.
Has anyone seen this or know of a solution?
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : <%= FACEBOOK_CONFIG['app_id'] %>, // App ID
channelUrl : '//'+window.location.hostname+'/channel', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
setTimeout('document.location.reload()', 10);
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

FB.logout doesn't log out

I have implemented a Facebook based login.
The FB.login works perfectly, but the FB.logout doesn't. I have tried with different FB.init, deleting cookies, running the logout page several times in a row, but the only way to log my user out is in facebook itself.
The code I'm using for logout is:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '***************',
xfbml: true,
status: true,
cookie: true
});
FB.getLoginStatus();
FB.logout();
</script>
Any ideas?
Thank you
did you tried having some button onclick event is FB.logout();
function logout(){
FB.logout(function(response) {
// user is now logged out
});
}
<button onclick="logout()">LogOut</button>
Try This
Try to do this:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
and then call the FB.logout(). FB must be initializad before.
From the documentation:
This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.
The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.
The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

Facebook authentication API

I'm new to facebook API and I have some questions related to facebook authentication.
I have created an application and have edited the domain and url.
Website Domain
giftme.web44.net
Site URL
http://www.giftme.web44.net/
I used the following on my site webpage:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3347207XXXXXXXX', // App ID (I've replaced for security reasons)
channelUrl : 'http://giftme.web44.net/channel.html/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
And I've created the page 'channel.html' with only this:
<script src="//connect.facebook.net/en_US/all.js"></script>
Finally I used the login button:
<div class="fb-login-button" >Login with Facebook</div>
What i'm I doing wrong?
I keep getting this error:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: A URL informada não é permitida pela configuração do aplicativo.
http://www.giftme.web44.net/ is not equal to http://giftme.web44.net/
The redirect_url must contain the Site URL or Canvas URL as defined in your App Properties.
An example would be:
https://api.facebook.com/method/admin.setAppProperties?
access_token=CURRENTTOKEN&
properties={'post_authorize_redirect_url':'http://giftme.web44.net/channel.html/'}
Error code 191
FB App Properties

facebook login js sdk redirect

am trying to use facebook login on my site and here is how i load the sdk
window.fbAsyncInit = function() {
FB.init({
appId : '362869753746986', // App ID
channelUrl : '//WWW.FESTIVEHUB.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
and the login button
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="2"></div>
if i click the login button it shows a new facebook window for login and if i do it logs in the problem however are after the login the small new window remains and it blank but if i manually close it and refresh my page the login button is replaced with my FB profile picture so i need that login window to close automatically and i need a callback function so i can take action after the login. NB am working on localhost if its worth noting!
Your code looks OK, but your issue is probably your channelUrl file. The domain on the channel URL, your applications registered URL, and the URL you are trying to login from all have to match. The channel file also needs to have a single line
<script src="https://connect.facebook.net/en_US/all.js"></script>
to work.

Facebook Login link auto refresh to facebook user profile link and picture

I am trying to make a WordPress submit form using Gravity Forms where the visitors see a "Login with Facebook" button.
Once the visitor logs in and grants the permission, the section then refreshes to show the Facebook user profile link and picture, letting the visitor know that they are submitting with the Facebook profile.
I have already copied the codes but I need some help to complete it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.MY-DOMAIN.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the 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>
<script>
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
</script>
Now, what do I put to get the section where I can show a "login button" and then show the user profile link after someone logs in?
For log-in you may use one of:
FB.login method of JavaScript SDK
Login Button (which have HTML5/XFBML/Iframe version)
Your call the to API is too premature in the page load. First it need to be done after facebook scripts are ready to be run. You can put the code into the fbAsyncInit() function. Secondly, you should follow this paradigm to ensure the user is logged into your app, see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/