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
}
}
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'm trying to develop a Windows 8 app and I want to integrate Facebook in it.
I know this can be done without their SDK, but I've seen it can also be done with it and I'd love to go for the SDK.
I have the all.js file downloaded and referenced.
I included the initialization code in default.html:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '*******', // App ID from the app dashboard
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
};
</script>
I'm trying to login using FB.login() when a button is pressed, but it's not working because
FB.getLoginStatus(function (response) {
console.log("entered")
if (response.status === 'connected') {
console.log("connected");
} else {
console.log("connecting");
FB.login(function (response) {
if (response.authResponse) {
console.log("connected");
} else {
console.log("canceled");
}
});
}
});
However, nothing happens when I click the button I attached this function to.
What can it be?
Any help is appreciated,
thanks!
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
alert("hh");
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '197393374008468',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.7' // use version 2.2
});
// Now that we've initialized the SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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 = "https://connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
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.
I am able to get the registration form working with custom fields and retrieve the custom fields via a cookie on the redirect page. What I cannot figure out is how to retrieve the Facebook info (name,email,birthday) on the next page (I'm not a PHP guy). I have been over the documentation several times, the "reading the data" section (FB Documentation), and scoured the internet but can only find PHP and C# solutions.
I am looking for a javascript, jQuery, or ColdFusion solution if someone could help me out.
Below is my code as a quick reference. As it stands Page 2 just dumps out the cookie information.
Page 1
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<!--- Facebook Call --->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myAppID', // App ID
channelUrl : 'http://.../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
});
};
// 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>
<!--- Output Facebook Box--->
<fb:registration redirect-uri="http://.../page2.cfm"
fields='[
{"name":"name"},
{"name":"email"},
{"name":"displayName","description":"Display Name:", "type":"text"},
{"name":"location"},
{"name":"birthday"}
]'
onvalidate="validateAndSave">
</fb:registration>
<!---Validation + set Cookie --->
<script>
function validateAndSave(form) {
if (!form.displayName) {
return({"displayName":"Display Name is Required"});
}
document.cookie = 'fbInfo='+'displayName='+form.displayName;
return {};
}
</script>
</body>
Here is my implementation based on trial and error with the FB javascript API.
function checkFB()
{
if (typeof(FB) === "undefined")
{
var t = setTimeout("checkFB()", 1000);
if (debug) console.log("FB is still undefined, try again in 1 second.");
}
else
{
if (debug) console.log("FB is defined, try to login -> ");
//Function to check the current login status of facebook
FB.getLoginStatus(function(r)
{
if (r.status === "not_authorized")
{
if (debug) console.log("-> NOT AUTHORIZED ");
}
else if (r.status === "connected")
{
if (debug) console.log("-> connected ");
if (r.authResponse)
{
FB.api('/me', function(rr) {
document.getElementById("fbFname").value = rr.first_name;
document.getElementById("fbLname").value = rr.last_name;
document.getElementById("fbEmail").value = rr.email;
document.getElementById("fbID").value = rr.id;
document.getElementById("status").value = "OK";
});
submitFB();
}
else
{
document.getElementById("status").value = "NOT AUTHORIZED";
history.go(-1);
if (debug) console.log("NOT AUTHORIZED");
}
}
else
{
if (debug) console.log("-> not connected -> POP UP BOX expected ");
// start login process
FB.login(function(re)
{
if (re.authResponse)
{
FB.api('/me', function(rr) {
document.getElementById("fbFname").value = rr.first_name;
document.getElementById("fbLname").value = rr.last_name;
document.getElementById("fbEmail").value = rr.email;
document.getElementById("fbID").value = rr.id;
document.getElementById("status").value = "OK";
});
submitFB();
}
else
{
document.getElementById("status").value = "NOT AUTHORIZED";
history.go(-1);
if (debug) console.log("NOT AUTHORIZED");
}
},
{scope: 'email'}); // we define what information we want to get from the user
}
});
}
}
I hope you have already gotten an appID from facebook and have a channel file, they need to replace 'myAppID' and 'http://.../channel.html'.
FB.init({
appId : 'myAppID', // App ID
channelUrl : 'http://.../channel.html', // Channel File