I am using the following code to enable users to login. It works perfectly but the problem is that it shows the name of website rather than signin - sign out so user is not able to sign out. how should I change it to enable users to sign out ? based on blew comment I added autologoutlink="true" and now singout is visible but when user is signed in it write a sentence as following jack is logged in myproject (jack is username and myproject is name of my project)
<html>
<head></head>
<body>
<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
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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 testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
autologoutlink="true"
Add this parameter to your fb:login-button:
<fb:login-button show-faces="true" width="200" autologoutlink="true" max-rows="1"></fb:login-button>
Hope it helps!
Related
I need a apps where user can login & after login some info will shown. But I have faces many problems several times. Please help me to correct this. SOmetime shows FB not recognized, sometimes shows GET file://connect.facebook.net/en_US/all.js net::ERR_FILE_NOT_FOUND .
<html>
<head>
<title> Facebook </title>
<script src="jquery.js"></script>
</head>
<body>
Login
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI() ;
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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>
</body>
</html>
add http: in front of //. I think this is necessary.
I've just tried to make a fecebook login for my website and trying to test the following in local..which is located localhost inside a project folder name 'facebooklogin'
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
// 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 testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
but it shows the error in console.. what is proper way of redemption from this issues in local machine...?
And what will be the App Domain if I wanna test it in local..? I tried with 'localhost' or 127.0.0.1 but it shows alert like this
It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
So I found a tutorial on Facebook Login Integration at: http://www.excellencemagentoblog.com/facebook-login-integration-website
I followed it step by step and Google Chromes Developer Tools give me an error after clicking Facebook Login saying:
Uncaught TypeError: object is not a function index.php:53
onclick
The button html is like this:
<a class="btn btn-success" href='#' onclick='login();'>
<i class="icon-facebook"></i>
Facebook Login
</a>
The script is as follows, I really can't tell what is wrong because the function is defined within the script.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : ' 163289720517425', // App ID
channelURL : '', // Channel File, not required so leave empty
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : false // parse XFBML
});
};
// logs the user in the application and facebook
function login(){
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
window.location.href = 'php/fbconnect.php';
}else{
FB.login(function(response) {
if(response.authResponse) {
//if (response.perms)
window.location.href = 'php/fbconnect.php';
} else {
// user is not logged in
}
},{scope:'email'}); // which data to access from user profile
}
});
}
// 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>
Not too sure of the problem you're having here....cuz even when I boiled it down to just the function with an alert....it still didn't work???? Meaning it had nothing to do with facebook.
Anyways....this is how I would do it....
You're doing a cross domain request...so you have to register your domain....
Also....FB provides a javascript SDK, so no need to use both PHP and Javascript as you were trying...
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '163289720517425', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms!!
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
$('.btn-success').click(login);
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});}
I'm trying to integrate a Facebook login with my website, and I'm testing out my Facebook login right now through a local host. This is the code I've generated from following the instructions on the Facebook JavaScript SDK guide.
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '*************', // App ID
channelUrl : 'http://localhost', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
testAPI();
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testApi();
} else {
// cancelled
console.log('Login failed!');
}
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
(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>
<script src="//connect.facebook.net/en_US/all.js"></script>
</body>
</html>
It's saying that it failed to load resource: file://connect.facebook.net/en_US/all.js It's basically failing GET all.js. What's wrong?
My Facebook App Dashboard has localhost as the AppDomain and Site URL as http://localhost.
Try following code.
(function(){
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'http://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
2018 Updated Answer:
1) The test HTML file can't be loaded as file:// it needs to be loaded under a web server (eg: http://localhost/test.html )
2) Disable script/ad blockers. Most of them see the FB SDK as "evil" and block it.
I am creating a facebook app and it uses Javascript API to store username and other details in js variables. And this app is created under Python(using Google App Engine). I want to access the js variables in Python and store the values in Db. How to do this?
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.out.write("""
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Captain Pandey</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '185318768251247',
channelURL : 'http://localhost:8080/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me', function(apiResponse) {
var name = apiResponse.name;
});
}
else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
}
else {
// the user isn't logged in to Facebook.
}
});
};
(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>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="email">Login to Facebook</div>
</body>
</html>
""")
and template used is webapp2
Design the Javascript code so that it makes an AJAX request that sends the data, and write a Python handler for that request.