Click here to Skip to main content
14,934,919 members
Please Sign up or sign in to vote.
2.33/5 (3 votes)
See more:
Dear friend,

I have to use facebook Login/Logout in my website, but not able to implement it in right way.
I have searched several code snippet in google but not worked for me or I am missing something.

Please help me with code snippet or best solution ,so that I can implement it.
HTML
<html> 
<head> 
<title>Facebook Login Authentication Example</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script> // 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));
 // Init the SDK upon load window.fbAsyncInit = function() 
{ 
FB.init({ appId: '198191300293654', 
// App ID channelUrl:
 '//' + window.location.hostname + '/channel', 
// Path to your Channel File status:
 true, // check login status cookie:
 true, 
// enable cookies to allow the server to access the session xfbml:
 true 
// parse XFBML });
 // listen for and handle auth.
statusChange events FB.
Event.subscribe('auth.statusChange', function(response) { if (response.authResponse) { 
// user has auth'd your app and is logged into Facebook
 FB.api('/me', function(me) { if (me.name) { document.getElementById('auth-displayname').innerHTML = me.name; 
} }) document.getElementById('auth-loggedout').style.display = 'none'; 
document.getElementById('auth-loggedin').style.display = 'block'; 
} 
else 
{ 
// user has not auth'd your app, or is not logged into Facebook 
document.getElementById('auth-loggedout').style.display = 'block';
 document.getElementById('auth-loggedin').style.display = 'none';
 } });
 $("#auth-logoutlink").click(function() 
{ 
FB.logout(function() 
{ window.location.reload();
 }); }); } </script>

Facebook Login Authentication Example
HTML
<div id="auth-status"> 
<div id="auth-loggedout"> 
<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
</div> 
<div id="auth-loggedin" style="display: none"> Hi, <span id="auth-displayname"></span>(logout) </div> </div> </body> </html>


Thanks in advance.
Posted
Updated 4-Sep-12 2:50am
v3
Comments
bbirajdar 4-Sep-12 8:12am
   
You are missing the code.. If you think there is problem in your code, you should post it here to investigate...
bbirajdar 4-Sep-12 8:24am
   
which sdk are you using?
rahulbhadouria 4-Sep-12 8:30am
   
I am using this code snippet, Here I am able to login but Logout is not working.


<html>
<head>
<title>Facebook Login Authentication Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// 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));


// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId: '198191300293654', // App ID
channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});


// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me) {
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
$("#auth-logoutlink").click(function() { FB.logout(function() { window.location.reload(); }); });
}
</script>


Facebook Login Authentication Example


<div id="auth-status">
<div id="auth-loggedout">


<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div></div>
<div id="auth-loggedin" style="display: none">
Hi, <span id="auth-displayname"></span>(logout)
</div>
</div>
</body>
</html>
Christian Amado 4-Sep-12 8:36am
   
And your code is...
rahulbhadouria 4-Sep-12 8:39am
   
this is only the code,,and it is working when we login but logout is not working,,,
Kenneth Haugland 4-Sep-12 8:51am
   
I tryed to paste in your code in the question, still some formattiong issues with it as I dont know Javascript very well....

1 solution

Use this script for facebook logout. It works on my site

HTML
<form>
<div id="fb-root">
<script language="javascript">
window.onload=function()
{
    // initialize the library with your Facebook API key
    FB.init({ apiKey: 'b65c1efa72f570xxxxxxxxxxxxxxxxx' });

    //Fetch the status so that we can log out.
    //You must have the login status before you can logout,
    //and if you authenticated via oAuth (server side), this is necessary.
    //If you logged in via the JavaScript SDK, you can simply call FB.logout()
    //once the login status is fetched, call handleSessionResponse
    FB.getLoginStatus(handleSessionResponse);
}

//handle a session response from any of the auth related calls
function handleSessionResponse(response) {
    //if we dont have a session (which means the user has been logged out, redirect the user)
    if (!response.session) {
        window.location = "/mysite/Login.aspx";
        return;
    }

    //if we do have a non-null response.session, call FB.logout(),
    //the JS method will log the user out of Facebook and remove any authorization cookies
    FB.logout(handleSessionResponse);
}
</script>
</div></form>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900