THis is my first time trying to use the Facebook javascript SDK so please bear with but I am having issues trying to retrieve an email address from the Facebook API. I have the code below in my site:
<script>
window.fbAsyncInit = function() {
FB.init({`enter code here`
appId : 'my id',
xfbml : true,
version : 'v2.5'
});
};
(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>
I think I have connected successfully to the api as when I add a like button for testing:
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
it seems to load in all buttons from the api.
WHen I try to retrieve a users name however I get an error message saying "undefined". Here is my code for attempting to retrieve username
jQuery(".test123").click(function(){
FB.api(
'/me',
'GET',
{"fields":"id,name,email"},
function(response) {
alert('Your name is ' + response.name);
}
);
I've doublechecked on the Graph API and it seems im using the correct method so not sure what the problem could be and all other articles i've seen seem to make the same call or something similar and more simple like:
FB.api('/me', function(response) {
alert('Your name is ' + response.name);
});
But nothing has worked for me yet.
You need to authorize the user with FB.login first:
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
}
}, {scope: 'email,public_profile'});
Here´s a tutorial: http://www.devils-heaven.com/facebook-javascript-sdk-login/
...and here´s the official page for FB.login: https://developers.facebook.com/docs/reference/javascript/FB.login/
Without authorization, you can´t get any user data.
Related
For New Developers who are trying to integrate facebook login and authentication in their websites, they might receive the error if they'll simply try to copy the tutorial from Facebook Help for Developers.
Error is : Uncaught ReferenceError: statusChangeCallback is not defined
Code:
<script>
function checkLoginState() {
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
}
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function () {
FB.init({
appId: '<Your App ID>',
cookie: true,
xfbml: true,
version: 'v2.12'
});
FB.AppEvents.logPageView();
};
</script>
<fb:login-button scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
<div id="status"></div>
The solution is that new developers are forgetting to write success callback function in their code. The problem occurs when they try to copy the code from Facebook's Guide that comes immediately after Facebook App Registration.
In your HTML define a div with id status <div id="status"></div> just before the <script> tag.
Please include the javascript method below for the API to work. I have written some console.log verbose text. You can delete this text and replace with yours.
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.
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 + '!';
});
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
I am working on share functionality using Facebook. The login functionality is working fine. But when I try to share something using a sample code, it is showing like
Sorry, something went wrong.
We're working on getting this fixed as soon as we can.
The code I am using is
$('#fb_test').on('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'URL which you would like to share ',
picture: "URL of the image which is going to appear as thumbnail image in share dialogbox",
caption: 'Caption like which appear as title of the dialog box',
description: 'Small description of the post',
message: ''
}
);
});
Use this code instead of yours this will works fine.
First reference this fb script after the body tag
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'app_id',
xfbml : true,
version : 'v2.8'
});
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'));
</script>
then call this method on your <a> click:
function ShareOnFacebook(){
FB.ui(
{
method: 'feed',
name: 'test Blog title',
link: 'http://stackoverflow.com/',
picture: 'https://pbs.twimg.com/profile_images/740344950097903616/mORHo2rZ.jpg',
caption: 'I love stackoverflow',
description: 'The stackoverflow forum will provide good solutions',
message: ''
});
}
This will work for you :)
It seems like this error can happen for any number of reasons, and they don't tell you what the problem is.
In my case, I omitted the # from the hashtag field, which is apparently cause for total failure.
win.FB.ui({
method: 'share',
href,
hashtag: '#wow', // NOT 'wow'
})
I want to do is get basic information about a FB Page (total page likes, posts posted by the page). Using the Facebook Javascript SDK I am running into problems.
window.fbAsyncInit = function() {
FB.init({
appId: '12345', //My app id
xfbml: true,
version: 'v2.5'
});
/* make the API call */
FB.api(
"/128155725517",
'GET',
// {"fields":"id,name"},
function(response) {
if (response && !response.error) {
console.log(response);
}
}
);
};
(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'));
And the response I get is:
/**/ FB.__globalCallbacks.f1084b047c({"error":{"message":"An access token is required to request this resource.","type":"OAuthException","code":104,"fbtrace_id":"HUcIot7YeoH"}});
My question is this: Can I request from the Graph API WITHOUT a user access token? Do they have to log in to get an access token for me to read info from the Graph API? Can I create a token that will always work, no matter if the website visitor is logged into FB?
Thanks in advance.
Without login, you can only use an "App Access Token". It is just a combination of App ID and App Secret - but you should never use it in client code, of course. If the Page is restricted by age or location, you need to use a User Token or Page Token.
More information about Tokens and how to generate them:
https://developers.facebook.com/docs/facebook-login/access-tokens
http://www.devils-heaven.com/facebook-access-tokens/
I am fetching the wall post from my FB page using Javascript API as below.
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//console.log('Logged in.');
}
else {
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(response);
FB.api('/153466xxxxxxxx/posts', function(response) {
console.log(response);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: ''});
}
});
};
(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'));
});
however, this needs the user to login and allow permissions to the app. Is it possible for me, using PHP FB SDK, to fetch the wall post from my account ONLY and show it on my webpage without asking the users to login to their Fb account.
Any help will be appreciated.
For a Facebook Page it´s quite easy, all you need is an App Access Token:
https://developers.facebook.com/docs/facebook-login/access-tokens/
http://www.devils-heaven.com/facebook-access-tokens/
The Facebook SDKs will use an App Token automatically if no user is logged in, but you can also just add the Access Token. Be careful though, don´t use the easy way to create an App token, which is just a combination of App ID and App Secret:
var accesstoken = APPID + '|' + APPSECRET;
Now if you use that one on the client with JavaScript, your App Secret will be visible to everyone, which is very bad. I would suggest using PHP for this, either with the PHP SDK or simple CURL calls. If you really want to use JavaScript only, just visit the first link i posted and check out how to generate an App Token with a Graph API call:
GET /oauth/access_token?
client_id={app-id}
&client_secret={app-secret}
&grant_type=client_credentials
For a User Profile it´s a lot harder, because you do need a User Token for that. And even an Extended User Token is only valid for 60 days. After that, you need to refresh it manually. But User Profiles should not be used for that anyway.
This is the code that I'm using to load the SDK:
window.fbAsyncInit = function() {
FB.init({
appId : "<APP_ID>",
status : true,
cookie : true,
xfbml : true
});
};
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
And this is called when the user clicks the invite button:
function inviteFriends(){
FB.ui(
{
method: 'apprequests',
message: 'invites you to play'
},
function(response){ console.log(response) } // temporary to verify
)
}
The user experience is like described in https://developers.facebook.com/docs/concepts/requests/#ux , but when the receiver logs in the notification disappears after Facebook loading.
Searching for an answer, I found these:
Notification for facebook app requests not showing up
http://facebook.stackoverflow.com/questions/11279765/facebook-pagetab-request-dialogue-notification-shows-and-goes
http://facebook.stackoverflow.com/questions/9689927/ios-fb-request-dialogs-not-working-properly
http://facebook.stackoverflow.com/questions/9812572/facebook-sdk-javascript-request-dialog-disappearing-on-receiver-side
http://facebook.stackoverflow.com/questions/8823362/invite-friends-for-a-website-app-fb-ui-apprequests
http://facebook.stackoverflow.com/questions/10209281/handle-facebook-apprequest-notification
http://facebook.stackoverflow.com/questions/8979826/facebook-notification-from-my-app-appears-and-disappears
But:
sandbox mode is disabled;
the canvas app url is defined, as well as the secure canvas app url;
the app type is defined as Web.
What am I missing?
Facebook was testing what would happen if user-to-user requests did not show up on the notifications jewel. They explain it here:
https://developers.facebook.com/bugs/532388000129311
The test has apparently concluded, and things should go back to normal soon, at least for now.
This still happens when your canvas app is not properly set up. See the answer here:
Facebook notification from my app appears and disappears