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
Related
Okay, so I have this app that needs to access the FB api in order to post content... thing is, I'm, of course, trying my app on localhost. (php5.6 internal server)
I keep getting the error:
The Login Button plugin no longer works on http pages. Please update your site to use https for Facebook Login.
and
The method FB.getLoginStatus can no longer be called from http pages.
despite the fact that people keep saying that https is not required for localhost, so long as the app is in development, which it is.
I thought maybe it was because I was running the php server on port 8000, but I checked using php5.6 -S localhost:80 just in case and the result is literally the same.
The code is:
<div id="fb-root"></div>
<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="true"></div>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '[totally valid id belonging to my development app I quadruple checked.]',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v5.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
(function(d, s, id) { // Load the SDK asynchronously
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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
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>
<div id="status">
</div>
Please, help me out here. Do I really have to set up a server with https etc etc just for this?
With node.js you can use a tool called "devcert" to have https on localhost.
For PHP:
How do I allow HTTPS for Apache on localhost?
Localhost server with php and ssl
https://linoxide.com/linux-how-to/mkcert-localhost-ssl-certificates-linux/
following change works for me without any issue
change localhost URL from
'localhost/yoursitename' to 'https://localhost/yoursitename'
I want to add Facebook login to my website, My script is working fine but I am not sure this way is correct or not, can you someone verify and suggest If I am doing wrong. And I have few questions.
Script:
function statusChangeCallback(response)
{
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log('still not authorized!');
} else {
console.log("not connected, not logged into facebook, we don't know");
}
}
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
cookie : true,
xfbml : true,
version : 'v2.8'
});
checkLoginState();
FB.AppEvents.logPageView();
};
(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'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', { fields: 'name,email,gender' }, function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
window.location.replace('http://www.example.com');
});
}
Button display:
<div class="fb-login-button" data-onlogin="checkLoginState()" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-login-text="Sign in with Facebook"></div>
After successful login, I want to redirect to members-only.php by passing id, email. In the above script I have written window.location.replace('http://www.example.com'); instead example.com, can i give my php file name?
appId can be seen by every body, will that be fine? or we need to keep it as secret?
If the user is coming for the first time, what details we need to register in our database? and from second time how can we identify that user?
Thanks in advance.
window.location.replace('http://www.example.com/members-only.php');
It is no problem to make the App ID public. Just be careful with Access Tokens and the App Secret. They are not meant to be public.
You only need the ID to identify the user. The rest is up to you, if you want to cache it.
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 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 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 :)