I am trying to localise the pop-up login box shown using FB.login() under the Javascript SDK but the dialog only displays in English. I use the code below to connect:
var facebookScript = "//connect.facebook.net/fr_FR/all.js"
$.ajaxSetup({ cache: true });
$.getScript(facebookScript, function () {
FB.init({
appId: SOCIAL_FACEBOOK_APP_ID,
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.getLoginStatus(function () {
// At some point here FB.login() is called.
}, true);
});
I notice that if I take the URL of the login box and add &locale=fr_FR to it I get the desired result.
Facebook will automatically use the appropriate locale based on information from the users browser and account.
The localized versions of the SDK is mostly to make a few adaptions that need to happen on the third party site, mostly around left-to-right/right-to-left languages, and some labels.
Related
For context I am trying to build a small microsite to pull social media insights from Facebook. I am looking to build a Django backend and React front end.
I would like to implement FB login with the Javascript SDK since according to the docs this refreshes the access token each time a FB call is made using the SDK.
I have a very simple login script taken from FB official docs which literally just logs in the user and then outputs the list of accounts the user has access to.
The issue is that, despite refreshing the page (and therefore performing an API request) the data expiration date doesn’t extend (it still displays the date of first login).
Is anyone familiar with the Javascript SDK and whether this is normal behaviour?
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log(response);
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
FB.getAuthResponse(function(response){
console.log(response.authResponse.accessToken);
});
} 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 : 'APP_ID_GOES_HERE',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v13.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 testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me/accounts',
function(response) {
console.log(response)
});
}
function logout_js_user(){
FB.logout(function(response) {
// Person is now logged out
});
};
FB.getLoginStatus does refresh the Token, but not on every Page call. It only refreshes the Token when it is not valid anymore. That is why the expiration data does not change.
You can can a more accurate status with the second parameter of the function set to true, but be aware that this might affect performance:
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
If you call FB.getLoginStatus on every page load, be careful not to
set this parameter for each as it will significantly increase the
number of requests to Facebook's servers, and thus decrease the
performance of your application.
Side note: ou can use FB.login to make the login less complicated (in my opinion) - here's an old but still valid article about that: https://www.devils-heaven.com/facebook-javascript-sdk-login/
I am using login using facebook in my website,
Here is the button
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
I am using the exact example given here
But after the check login status, i am getting the response with only the userid of facebook and token, but i want to get the username too.. How can i get that ?
Help pls
Here is the script
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxx',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2' // use version 2.2
});
FB.getLoginStatus(function (response) {
console.log(response);
console.log(response.email);
//here status is connected
//statusChangeCallback(response);
});
};
In the resopnse, i am getting the entire json,
In the response.status i am getting as connected
But while i try response.email i am getting undefined
How can i get the email or username ?
EDITED to show what actually fixed it for me:
So it does appear to depend on what version of the API your config is set to allow. BUT, I was able to get the email address on a v2.5 api by using the following:
If you are using the Hello World code, then replace this section:
FB.api('/me', function (response) {
console.log('Success ');
console.log(response);
});
With this:
FB.api('/me', { fields: 'email' }, function (response) {
console.log('Success ');
console.log(response);
});
The difference is adding the { fields: 'email' } object to the call. This appears to have been a new addition in either v2.4 or v2.5 of the API which is why older code you see on SO appears to work for the poster but not for you. Hope this helps.
I'm not sure this qualifies as a solution, but I was able to reproduce this issue (no email returned after a valid request).
I have two apps, each created under a different FB account. The first one was created more than a year ago and the second one was created today. I have code that runs perfectly against the older app (returns email) and fails against the newer app (no email).
At first I thought maybe FB just holds back on certain data for brand new apps but I thought it was odd that it wouldnt be documented anywhere.
So I decided to compare each app configuration side by side. I found that the older one had API VERSION (at the top of the dashboard) set to 2.0 and the newer was 2.5. The Hello World code on the API SDK page requests version 2.2 like so:
window.fbAsyncInit = function () {
FB.init({
appId: [my app id here],
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2'
})
};
According to the documentation, the fact that the newer app has API set to 2.5 in the config means that any requests for an older API (eg 2.2) will be automatically upgraded to 2.5. When I set the javascript above to request 2.5 (eg version: 'v2.5'), I was able to get the older app to fail too. So I suspect the issue is with the newer v2.5 api.
I have not been able to find out how to set my new app to accept older api calls but will update here if I do.
I am using the Facebook JS SDK v3.2.0 for an OAuth2 authentication.
I use the following code:
For initialization:
FB.init({
appId: 'MY_APP_ID',
status: true,
xfbml: true,
version: 'v1.0'
});
As a (synchronous) response to a user click on a button:
FB.login(function(response) {
if(response.authResponse) {
console.log('success');
} else {
console.log('error');
}
});
Behavior:
Initially, the dialog popup opens, asking for the basic permissions. When clicking on the "Okay" button in the dialog, a request to facebook is made which returns with 200. Additionally, when using the FB.getLoginStatus(), I see that I am correctly logged in.
However, neither does the popup close nor is my callback function for the login call evoked.
Moreover, re-trying the whole process will result in a blank popup opening which can be resolved by removing my app manually from my list of authorized apps on Facebook's settings page.
Our Asp.net site has been using the facebook login button (w/ javascript sdk) to handle the login process, and now that Oauth is mandatory (as of Dec 15, 2011 (yesterday))- it is broken. I've made some obvious changes that were mentioned the fb oauth migration blog, but still I'm getting errors. Specifically, when FB.init()'s parameter sets status=false, the auth.login event is never fired (which is a problem, because I use callback on that event to invoke another page which does some server-side open graph queries based on the authorization token in the resulting cookie). If I set status=true, then the event is fired, but the cookie is not set, and so I'm unable to make my server-side open graph queries.
Here's my javascript code (slightly edited...):
window.fbAsyncInit = function () {
FB.init({
appId: GetFacebookAppId(),
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse && response.authResponse.accessToken)
FacebookLoginRedirect();
});
}
Any ideas?
Thanks!
Try FB.getLoginStatus() instead of if (response.authResponse && response.authResponse.accessToken)
See detaild example here in the docs : ]
Hopefully someone finds this useful- I was able to listen to a different event: auth.statusChange, check the response, and then proceed. One thing was that I had to unsubscribe to this event once I had successfully logged in, but then it seemed to work ok.
listen to auth.statusChange :
FB.Event.subscribe('auth.statusChange', handleStatusChange);
Here is my code, this is working fine only on apps developer account. WT is my wrong?
window.fbAsyncInit = function() {
var APP_ID = 'XXXXX';
var PAGE_ID = 'XXXXX';
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
});
FB.api('/me/likes/' + PAGE_ID, function(response) {
t = $.toJSON(response);
alert(t);
});
}
RESULT
developer account:
{"data":[{"name":"111222333","category":"Small business","id":"281428705206834","created_time":"2011-09-02T14:14:37+0000"}]}
non-developer account:
{"error":{"type":"OAuthException","message":"An active access token must be used to query information about the current user."}}
It might have something to do with the page settings. If the page is set to be invisible, as in only visible for the administrators of that page, that could be a cause why you are getting that error.
Have you set your page available for everyone?
In order to see a user likes with graph api you will need the permissions to do so. user_likes
See: http://developers.facebook.com/docs/reference/api/permissions/