I am trying to have a connect button on my site. Once the user has clicked the facebook login button, the pop up will ask the user to enter the authentication detail and the parent window will either redirect or refresh the page and the login button became a logout button.
My problem is when a user clicked the connect button from the popup, the popup page will redirect to my canvas page rather than closed the popup instead.
Many people have posted this issue, if you have done everything else right, the reason for this is xd_receiver file was not read by the fb.
You need to make sure that where your fb connect button is, you specify the correct path to xd_receiver.html file somewhere on bottom of that page. Something like below:
<script type="text/javascript">
FB.init("your api key here", "xd_receiver.htm");
</script>
It is even better and easier to put the xd_receiver file on your site's root folder and specify it with full domain url like this:
<script type="text/javascript">
FB.init("your api key here", "http://www.yoursite.com/xd_receiver.htm");
</script>
Here's a sample of facebook connect, login and logout, works very well,
Also make sure you add your site url under your app settings -> Website - > Site URL:
<!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>Facebook Connect Sample</title>
</head>
<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
});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something on login
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something on logout
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
/* Loading the JS SDK Asynchronously - Refer: https://developers.facebook.com/docs/reference/javascript/ */
(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);
}());
function login(){
window.location = "http://google.com"; // Redirect to Another Page.
/* Show User's Name
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";
});
*/
}
function logout(){
document.getElementById('login').style.display = "none";
}
</script>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<div id="login" style ="display:none"></div>
</body>
</html>
Related
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.
I am new to Facebook app development. Following is my html and script code to retreive access token for facebook users.
I am having a checkbox and on Selecting the checkbox, I need the facebook login authentication form to be loaded.
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<table>
<tr>
<td>
<input type="checkbox" value="Facebook" name="facebook" id="facebook" onclick="checkFacebookLoginCredentials(this,'fb')"/>
<div id="fb-root"></div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
var userFBAccessToken="";
function checkFacebookLoginCredentials(field, accountType)
{
loadFBAuthenticationWindow(); //Function to load the facebook login authentication window
}
function loadFBAuthenticationWindow()
{
window.fbAsyncInit = function()
{
FB.init({
appId : 'MY_APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
FB.login(function(response)
{
if (response.authResponse)
{
console.log('Welcome! Fetching your Facebook information....');
userFBAccessToken = response.authResponse.accessToken;
console.log('userFBAccessToken: ' + userFBAccessToken);
FB.api('/me', function(response)
{
console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'user_activities,user_notes,user_photos,user_videos,user_status,offline_access'});
};
// Load the SDK Asynchronously
(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>
</html>
When I try to load the above html, I can see the iFrame (Facebook login authentication form) loaded properly in Chrome and FireFox browsers.
But when I tried to execute in SAFARI, the iFrame is not loaded.
Can anyone please say, what I have missed in the above code? Any suggestion please..
This sounds like a bug, especially if this is working in one browser but not the other. Please file this in the bugtracker: http://developers.facebook.com/bugs
i ma using Facebook JavaScript SDK for my FB iframe app. i wnat to get teh user email id in login state
here is my code......
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mettter</title>
</head>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
FB.init({appId:'1*********', xfbml: true, cookie: true, oauth: true, fbconnect: false}); FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
FB.api('/me', function(resp) {
alert('Your name is... ' + resp.name);
alert('Your email is.... ' + resp.email);
});
} else {
// no user session available, someone you dont know
alert("i dont know ");
FB.api('/me', function(res) {
alert('Your name is ' + res.name);
alert('Your email is ' + res.email);
});
}
});
</script>
<body>
<h1>Welcome</h1>
</body>
</html>
now when i hit my app URL.. i see a log in to app window i click log in then i see allow window asking for publish streams and when i click allow the the else alert is fired and conatains undefined instead of name and email and the URL contains this message
http://apps.facebook.com/palmchipprojecta/?error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.#_=_
i am not getting whats wrong in it??
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>
I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.
See a video of what I mean here.
My code is pretty standard:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">
...
<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />
...
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
});
};
</script>
...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX', // my app ID is here
status: true,
cookie: true,
xfbml: true
});
if (typeof(fbAsyncInitExt) == 'function') {
fbAsyncInitExt();
}
};
(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>
Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
console.debug(response);
});
FB.Event.subscribe('fb.log', function(response) {
alert('LOG: ' + response);
console.debug(response);
});
};
</script>
After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph
After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.