Here is my code
<html>
<head>
<head>
<title></title>
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript">
function go()
{
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.');
}
});
}
</script>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //oauth v2.0
});
};
// 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>
<input onclick="go();" type='submit' id='login-button' value='Login' name='login' >
</body>
</html>
Basically you click the button and it should show you a login pop-up. It works when I try in a normal browser but when I try in the iPhone simulator nothing happens. Iv also set the iPhone browser to allow pop-ups. what am I doing wrong?
I got it working using the phonegap plugin called Childbrowser :)
Related
I had added the facebook sdk after the body tag so I use this sdk for both (facebook login , facebook page plugin)
facebook login is working fine but the page plugin is not showing on my website in any browser.
i get this error in the console Uncaught TypeError: Cannot read property 'offsetWidth' of null
this is the sdk that i added:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxx',
version : 'v2.0',
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();
}
});
};
// 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/sdk.js";
//js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Welocme, ' + response.name + '.');
});
}
</script>
And this is the cod of the page plugin :
<div class="fb-page" data-href="https://www.facebook.com/example"
data-width="380" data-hide-cover="false" data-show-facepile="true"
data-show-posts="false"></div>
do I miss anything here? i add the sdk properly and I add also the page code properly in my website footer? why the plugin is not showing ?
NOTE : I noticed now that when I log in to my website through facebook the page plugin shows , even if I logged out the plug is still showing but when I close the browser and open again the plugin is not showing anymore with the same error in the console.
This is making me crazy - I can't get the facebook comment.create event to fire on mobile devices (not that I tested work). login event is working fine (auth.authResponseChange)
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', // App ID
channelUrl : '//WWW.MYAPPURL.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('comment.create', function(response) { alert("1"); });
// FB.Event.subscribe('auth.authResponseChange', function(response) {alert("1"); });
};
// 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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
comments
<div class="fb-comments" data-notify="true" data-href="http://test/test.htm" data-width="470" data-num-posts="10"></div>
</body>
</html>
Please note that this is still an ongoing FB bug
Facebook API's FB object just seems to go null after init. This is the code I'm using, it's quite simple. The problem is that it says my "/me" response is undefined. I'm logged in, just double checked, so this is not the case. I already gave it permission to use my data.
Why is my "/me" responce undefined?
Also, is there a way I can move my code:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
Into a separate .js file (with the code wrapped in a function), and have it load when function gets called inside window.fbAsyncInit? Cause every way I've tried to do that resulted in failure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[my code]', // App ID
channelUrl : '//[my channel]', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
};
// Load the SDK Asynchronously
(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>
</body>
</html>
edit-------------------------------------------------------
Now I'm not getting any function calls/error messages at all. This is the new code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx', // App ID
channelUrl : '//xxx/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.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookInit();
}
});
};
// Load the SDK Asynchronously
(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>
</body>
</html>
And inside mycode.js is:
function facebookInit(){
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
You need to defer the call to FB.api until after the status has been resolved - use FB.getLoginStatus or listen to one of the events for this.
Not sure what you mean with moving the code - you can put this code anywhere as long as it is loaded before the JS SDK.
I'm trying to login on my website with Facebook JS API from my iPhone. The login works fine on computer as well as iPad.
Here's the login screen:
On iPhone however, I get to a screen which looks like this:
When I close the Facebook screen with the "Back to previous page" message and reload the login page, I'm logged in successfully. It looks like the problem is, that iPhone is unable to close the login pop-up screen.
Here's my JavaScript code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '', // the app id
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// do something
}
});
FB.Event.subscribe("auth.login", function(response) {
if (response.status == "connected") {
// do something
}
});
};
function facebookRedirectLogin(redirect) {
// do something
}
function logout() {
FB.logout(function(response) {
// do something
});
}
(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" style="margin-bottom: 20px;">Forbind med Facebook</div>
How can I fix this problem?
Checkout this URL,
please do the settings as mentioned in the above URL, this code is working in mobile devices.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<div id="login">
<p><button onClick="loginUser();">Login</button></p>
</div>
<div id="logout">
<p><button onClick="FB.logout();">Logout</button></p>
</div>
<script>
function loginUser() {
FB.login(function(response) { }, {scope:'email'});
}
</script>
<script>
(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>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'xxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Event.subscribe('auth.authResponseChange', handleResponseChange);
};
</script>
<script>
function handleReponseChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
alert(response);
}
}
</script>
</body>
I have the exact same problem. This may (or may not) be an open Facebook bug: https://developers.facebook.com/bugs/280811108698311
I'am trying to get the Login button from Facebook to work on my website using the Javascript SDK. If the user is logged on, I get the email address back. This works. But on the page where I have my Facebook Login button, I also have the normal login for my website. (username & password). But when I go to my login page, the page automatically loads the Facebook button and the Facebook login dialog appears. But I don't want to load this button automatically. I want that users always have to press the login button for Facebook. Is this possible?
This is my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID', // App ID
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
FB.getLoginStatus(function(response) {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert('Good to see you, ' + response.email + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(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>
FB.getLoginStatus method is used to know whether user has logged in or not
FB.login is used to prompt login page to authenticate and authorize the app.
you are calling FB.getLoginStatus method and not bothering about the response and firing fb.login button always.
If you always want user to click login button don't use FB.getLoginStatus
Use this code
<html>
<head>
<title>My Facebook Login Page</title>
</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
});
};
// 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>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
FYI: https://developers.facebook.com/docs/guides/web/
check authentication section