I am new to developing websites with Facebook SDK. So please bear with me.
Below is my simple code for verifying that I am logged into Facebook.
For some reason I always get the 'not_autherized' response, even though I am the only developer of my app. The app number I provide is correct.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'censored app id', // App ID from the app dashboard
status : true, // Check Facebook Login status
cookies : true,
xfbml : true // Look for social plugins on the page
});
FB.getLoginStatus(checkLoginStatus);
function checkLoginStatus(response) {
if (response && response == 'connected') {
alert('User is authorized!');
} else {
alert('User not authorized!!!');
}
};
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id) {
if (d.getElementById(id)) return;
var js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
var fjs = d.getElementsByTagName(s)[0];
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Is there anything I have overlooked?
Much appreciated :)
A friend helped me with this. He very helpfully pointed out something that Facebook has neglected to document.
When you create a new facebook application, then it is NOT automatically authorized by the admin and developers. An authorized application is one that exists in the "Account Settings->Apps" list. If it is not in this list, then it is not authorized.
This means that you need to call FB.login() at some point in your code in order to popup the user authorization window.
Mind you, this should be called from a button. Otherwise, the popup could be blocked.
Hope this helps someone else but me.
Cheers :)
Related
When I try facebook login in localhost, it is worked but real server doesn't work.
When I try facebook login in localhost, it is worked but real server doesn't work.
When I try facebook login in localhost, it is worked but real server doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript 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') {
// 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 : '1530295003876175',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
// Now that we've initialized the JavaScript 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 = "//connect.facebook.net/en_US/sdk.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, ' +'<br/>'+ response.name +'<br/>'+ response.email + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript 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>
<b>This is only for server </b>
1) Go to http://developers.facebook.com
2) MyApps click
3) Create Apps
4) Add Platform (web/mobile/etc)
5) Quick Start for Website : ente`enter code here`r your site name or website url
[generate bleow api id and code its copy and user page then ]
example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '6417187378599749',
xfbml : true,
version : 'v2.2'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
6) Tell us about your website: Write/enter your website url/ domain name
7) Next button click
8) choose loging box/like box/etc
9) chosse up code demo and use
I had same issue. Facebook login works at local server but real server it return 0 as user id. The solution for this was, in the url use www.test.com instead of test.com, where test.com is your domain. It will solve your issue.
Thanks
I looked all over and I can't seem to find the solution to this. I am trying to implement Facebook login to my website and I am having one hell of a time doing so.
I have implemented the Facebook graph api and I have the login part built in but I can't get anything to return from it to handle it.
You can see what I mean on < phiride.com > (I don't know if that's bad netiquette to post the url on this website, if so sorry!)
I used the code given to get a return -->
<script>
FB.api('/me', function(response) {
console.log(JSON.stringify(response));
});
</script>
Absolutely nothing is printed to the screen and I can't find anyway to handle the information. I'm sure this is a simple beginner mistake but any help would be greatly appreciated.
Did you generate the html and script via their website.
https://developers.facebook.com/docs/plugins/login-button
This is what you need to do in order to make API calls work:
Initialize the JavaScript SDK
Authorize the user
Initialize the JavaScript SDK
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Authorize the user
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 + '.');
console.log('Your Email: ' + response.email);
}, {scope: 'email'});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
Only call FB.login on user interaction (on click) to make sure it does not get blocked by the browser - it has to get called AFTER FB.init too. You can also check if a user is already authorized by using FB.getLoginStatus right after FB.init.
Sources:
https://developers.facebook.com/docs/javascript/quickstart/v2.1
https://developers.facebook.com/docs/reference/javascript/FB.login/v2.1
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
I was just about to test something so I made 2 buttons with 2 links:
1.) using the facebook sharer.php functionality which works fine
2.) triggering the send ui using the URL redirect I took from the FB developers homepage:
http://www.facebook.com/dialog/send?app_id=123050457758183&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/
I replaced the app id and both links with my own. My app is set up so it point to the links, since I know I had it running once before, where that was the problem.
Now as said the share button works perfectly fine but when I click one the other button I just see a white screen. The URL is in the address bar. Firebug shows no console errors and an empty head and body tag.
Any suggestions?
Thanks,
Gerd
UPDATE: I also implemented the regular javascript ui.send method. The window popsup. I am connected with facebook as the ssl seal shows but again nothing but white.
As far as the URL is concerned the URL is fine it is just a matter of time until Facebook allows to share a URL it has not indexed before. When I changed the link to my main domain instead of subfolder it worked.
As far as the JS SDK is concerned I forgot to check whether the user is logged in or not so this is how it works:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourId',
xfbml : true,
version : 'v2.0'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="sendFb()">Recommend JS</button>
<script type="text/javascript">
function sendFb(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else
alert('Not Authenticated!');
});
}
});
}
</script>
</body>
</html>
I'm currently trying to allow user to connect to my site with their Facebook account but I have some issues.
First of all, you have to know that I already added a Like button with this code:
<div id="fb-root"></div>
<script>(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/fr_FR/all.js#xfbml=1&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var urlfb = document.location.href;
$(document).ready(function(){
$('fb\\:like').attr('href', urlfb);
});
</script>
So I saw the post of Facebook on how to add Facebook Login to his website but each time I launch the page where I pasted the FB code, there is this famous error message: FB.init has already been called - this could indicate a problem.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // 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
});
What do I have to do to remove this error ? I tried to remove my Like button and no more error but I want to keep this like button, so what do I have to delete to make it works ?
Any ideas ?
Thanks
Adding #xfbml=1&appId=myappid to the end of the SDK URL makes it automatically initialze itself – so just remove that part, change
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=myappid";
into
js.src = "//connect.facebook.net/fr_FR/all.js";
I am trying to have the user login to facebook and then display their user id in an alert.
Yet, I get nothing returned by this code. What am I doing wrong?
<html>
<head>
<title>Login to Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID',
channelUrl : 'http://www.mydomain.net/zoozTest/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}else{
alert('Login Failed!');
}
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
</html>
Your code, copied verbatim, works fine for me. Three things:
1: Stupid question, but you've replaced 'APP ID' with your actual app id, right? Otherwise that'll be an error
2: Check your app settings. Have you specified your app domain and 'website with facebook login' URL correctly?
3: Technically you have a race condition. If you click the 'Login with Facebook' div and attempt to run your login() function before the FB JS SDK has initialised (it loads asynchronously), you'll get an error as the global FB object won't be defined. I'd stick a console.log at the bottom of the window.fbasyncinit function to make sure FB is being defined (for testing, for production you'll likely want to either block the login from showing before Facebook is inited, or build some sort of queue that checks to see if the global FB object is defined before attempting to use it, and if not adds to a queue).
Do you have any errors in the javascript console?