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.
Related
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.
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!
I have a site that has a login through facebook option
I can't figure out what's wrong, I'm getting two kinds of errors
The first, even though for me it works (Chrome, Explorer) my friend receives a "new_fb_login() not defined" error
And just now I started getting those ambiguous errors (chrome debug):
Unsafe JavaScript attempt to access frame with URL **facebooky URL** from
frame with URL http://site.co.il/. The frame being accessed set
'document.domain' to 'facebook.com', but the frame requesting access did not.
Both must set 'document.domain' to the same value to allow access.
I thought it might have something to do with my site currently password protected, because now when I put the password back I just started getting them, but after disabling back they didn't stop, maybe takes some time to refresh?...
I'd appreciate some light upon this, thanks!
this is my code, right after the tag
<div id="fb-root"></div>
<script>
function new_fb_login() { //
if(!fb_connected){
FB.login(function(response) {
if (response.authResponse) {
fb_connected = true;
console.log('connected'); //Approved the app just now
login(true);
} else {
fb_connected = false;
console.log('cancelled');
}
});
}
else{
FB.api('/me', function(response) {
login(true);
});
}
}
function testAPI() {
console.log('Logged');
FB.api('/me', function(response) {
console.log('Welcome, ' + response.name + '.');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'MyActualCode', // App ID
channelUrl : '//WWW.site.CO.IL/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 init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('connected');
fb_connected = true;
//testAPI();
} else if (response.status === 'not_authorized') {
fb_connected = false;
console.log('not_authorized');
//login();
} else {
console.log('not_logged_in');
fb_connected = false;
//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));
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.
Hi I am writing a code to login the user through the facebook. I store all the function in a file along with other javascript function. I try calling login function from another javascript function and get following error: login is not defined. Here is the code for index.html
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="fb-root"></div>
Hi!
</body>
</html>
Here is javascript.js
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '213443452146381', // App ID from the App Dashboard
channelUrl : '//http://abc.in/', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected')
{
alert('connected');
}
else if (response.status === 'not_authorized') {
alert('not_authorized');
login();
} else {
alert('chillonly');
login();
}
});
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('connected');
testAPI();
} else {
alert('not_connected_login');
testAPI();
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
// ]]>
function sayhi()
{
alert('Hi');
login();
}
I doubt if the facebook jdk is getting loaded at all. Please suggest a way to achieve this.
The method login() is not accessible since it is in a local scope.
If you want function login() { to be used outside of that scope, you need to make it global or part of some global namespace.
Change
function login() {
to
window.login = function () {
First of all, move the functions out of the window.fbAsyncInit. They are not accessible since in the local scope.
Then, you can have a flag that will only set to true when the JS-SDK is loaded, and you can "block" any process outside the window.fbAsyncInit till the flag is set. Something like:
var isLoaded = false;
window.fbAsyncInit = function()
{
isLoaded = true;
...
...
}
function myFunc(myVar)
{
if(isLoaded)
{
// Do FB related stuff
}
}