Automated facebook post to wall with Javascript - facebook-graph-api

I have a facebook application in which the user is authenticated with PHP and grants permissions to the app, including publish_stream.
During the application, the user is going through several screens.
On the last screen, the is user chooses if they want to share a post on their wall.
If they do, an automated and formatted post should be posted on their wall.
I've tried to do it with Javascript but it didn't work. Can you see what's wrong?
Thanks!
Here's my code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true,
cookie : true,
xfbml : true
});
};
(function() {
var e = document.createElement('script');
e.src = 'http://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
function postToFacebook() {
var body = '';
var params = {};
params['message'] = 'MESSAGE';
params['name'] = 'NAME';
params['description'] = '';
params['link'] = '';
params['picture'] = 'https://www.URL.com/pic.jpg';
params['caption'] = 'CAPTION';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
// alert('Error occured');
} else {
// alert('Post ID: ' + response);
}
});
}
</script>

From reading your question and the various comments it seems to me that the users session information is not persisting into the JavaScript SDK - this assumes that there is a valid user session being maintained serverside.
First of all you should check that you are using the most up to date PHP SDK. To double check download and install the latest version from GitHub.
I think this should solve your problem as the cookies containing the authorised users session data should be passed between the PHP and JavaScript SDKs.
If that doesn't work I have a suspicion that the user is not being authenticated correctly serverside. In which case you could try the following.
Before you postToFacebook() you should check the users the users logged in status and log them in if necessary. For example:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
postToFacebook();
} else {
// no user session available, someone you dont know
FB.login(function(response) {
if (response.authResponse) {
// logged in and connected user
postToFacebook();
} else {
// User cancelled login or did not fully authorize
}
}, {scope: 'YOUR,REQUIRED,PERMISSIONS'});
}
});

You are not calling the function postToFacebook()!
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true,
cookie : true,
xfbml : true
});
postToFacebook();
};

When you attempt to do this:
FB.api('/me/feed', 'post', params, function(response) { .. });
You need to pass the access token along with the call. I assume you have it on the php/server side, so then:
FB.api('/me/feed/access_token='[INSERT_ACCESS_TOKEN], 'post', params, function(response) { .. });

Related

Access token doesn't contain any scopes

I want to get a list of my friends with their name, current location and profile picture. I executed the query and the access token (with the required scope parameters) in the GRAPH API explorer tool and it works fine --> https://developers.facebook.com/tools/explorer?method=GET&path=me%2Ffriends%3Ffields%3Dname%2Clocation%2Cpicture
But everytime I execute the application, I get an access token without the required scope (it has none). How can I send my scopes to the access token?
Scope I want to give to the access token: Scopes: friends_location user_location user_relationships
I work in a localhost environment.
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script js.src = "//connect.facebook.net/en_US/all/debug.js"></script>
<script>
var accessToken
var uid
window.fbAsyncInit = function() {
FB.init({
appId : '493774134048550', // App ID
channelUrl : '//localhost/Facebook', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
testAPI(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
//FB.login();
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
// FB.login();
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;ยต
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
}
}, {scope: 'friends_location, user_location, user_relationships'});
};
// 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));
// 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('Good to see you, ' + response.name + '.');
// console.log(response);
//});
///me/friends?fields=name,location,picture&accesstoken=CAACEdEose0cBAFhNXAYgMjfAPWNxGZAdNdEJ6s2GAyIQp4zicpV0ZBZCeVINbiLvIxaFl33N0I1gZAZArREsHmOGiqQX2HPaNZCiU4W4Nq3VA12TrreKfeOtFSMvmZC8c1qYqu85NZAzzWDXWH5foXIWfPFk1ZBScNbAZD
FB.api('/'+uid+'/friends?fields=name,location,picture&accesstoken='+accessToken, function(response) {
//FB.api('/'+uid+'/friends?fields=name,location,picture&accesstoken=CAACEdEose0cBAJayThSg77Ydil76EM0W4zuJ9l29yKoIxlu6g37ZAX1CWQhpTStBL48xoX5g0Bbe8Va4wr6qqT2ft5tZBoNDZCWFYF7TtwmBnTDOSGWruOp0pSS9Ws1phfl5wiFbHeZAyUbdZBDdx3GLBHeysn6EZD', function(response) {
var teller1 = 0;
console.log('Good to see you, ' + response.name + '.');
console.log(response.data);
for (var i=0;i<response.data.length;i++)
{
if(response.data[i].name && response.data[i].location && response.data[i].picture){
console.log(response.data[i].name);
console.log(response.data[i].location.name);
console.log(response.data[i].picture.data.url);
teller1++;
}
//<img border="0" src="console.log(response.data[0].picture.data.url)">
}
console.log(teller1); //aantal gebruikers met naam, locatie en picture
console.log(response.data.length); //aantal gebruikers in totaal
});
}
//Logout
function fbLogout() {
FB.init();
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</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.
Learn more about options for the login button plugin:
/docs/reference/plugins/login/ -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout</span></a></span>
</body>
</html>
Replace the code under response.status === 'connected' with this. Remove all other parts in the original code where the scope was added. (you only have to add it here)
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
if(accessToken)
{
// alert("Connected WITH accesToken");
testAPI();
}
else{
// alert("Connected WITHOUT accesToken");
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
}

Facebook Notifications Unsupported post request using JS

Error occured:Unsupported post request. I created a fb app that will allow the user click the button(This button is in my app)to send message to the app user and notify the user receiver that he has a notification from app. I don't know if i implemented it correctly.
I really need some advice and guidance about this matter thanks ...
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var accessToken = response.authResponse.accessToken;
FB.api('/'+254111161401649+'/notifications?'+accessToken+'&template=NewPosted&href=http://apps.facebook.com/lglinktest/', 'POST', {}, function (response) {
if (!response || response.error) {
console.log('Error occured:' + response.error.message);
}else{
console.log('Post ID: ' + response.id);
}
});
}
});
Solve it !!!! all i need is just to get the proper app access token

Need help getting my web site to publish info to Facebook wall

SO I am trying to have my web site publish info to a user's facebook page. Where I am now is that I placed the following code (as instructed by another stackoverflow contributor), which is getting executed however the alert with "error occurred" comes up. Do I need to request the publish_stream permission as well? If so, I cannot figure out how to add that to my code. Sorry, I'm not much of a scripter and I have very limited knowledge on doing any integration into facebook. My ultimate goal is to be able to post information to a users facebook page on their behalf (this won't be done without their permission). Any help would be much appreciated:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.XXXXXXXXXXXXXX.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
oauth : true
});
});
// Additional initialization code here
};
// 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>
<SCRIPT language="JavaScript">
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>
<SCRIPT language="JavaScript">
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
})
</SCRIPT>
Why don't you expand the error handling a little bit?
alert("Error occured: " + response.error.message);
And did you check the console log for errors? Maybe authentication didn't work.

call FB.login() after FB.init() automatically

i`m developing an app for Facebook.
My Code:
function init() {
window.fbAsyncInit = function() {
var appID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
FB.init({ appId: appID,
status: true,
cookie: true,
xfbml: true});
login();
};
(function() {
var e = document.createElement("script");
e.async = true;
e.src = "https://connect.facebook.net/en_US/all.js?xfbml=1";
document.getElementById("fb-root").appendChild(e);
}());
};
function login() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
};
I want to call the "init" function and after "init" should call the "login" function (open up the Facebook Login Window) automatically.
But i always get "b is null"
FB.provide('',{ui:function(f,b){if(!f....onent(FB.UIServer._resultToken));}}); Error in Firebug.
Can anybody help me?
Does anybody have the same problem?
Thanks
You needn't have the facebook init stuff in a function, it can go straight on the page, then it will load at the same time, rather than waiting for a button click to load. Then you just need the login logic on the logiin button
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit = function() {
var appID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
FB.init({
appId: appID,
status: true,
cookie: true,
xfbml: true
});
// This bit adds the login functionality to the login
// button when api load is complete
document.getElementById("login").onclick = function() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
}
};
(function() {
var e = document.createElement("script");
e.async = true;
e.src = "https://connect.facebook.net/en_US/all.js?xfbml=1";
document.getElementById("fb-root").appendChild(e);
}());
</script>
<a id="login" href="somewhere.html">My login button</a>
</body>
</html>
You can put the login stuff in a method and automatically call the it after the FB.init, but most browsers will block the pop up window. You are better off waiting for the user to click a login button to make sure they see it properly, and it is generally good practise to only make things happen when the user explicitly requests them to. I think the facebook 'good practice' guide also mentions this somewhere.

pages.isFan returns incorrect signature

I am working on a Facebook canvas iFrame application, and I`m going insane.
I am trying to check if a user is a fan of the page where the app is located, so that I can allow or disallow voting.
I use the following code:
function CheckFan() {
FB.init({
appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.api({ method: 'pages.isFan', page_id: '145116742177104' }
, function(resp) {
if (resp) { $('#main_frame').show(); $('#non_fan').hide(); }
else { $('#main_frame').hide(); $('#non_fan').show(); }
});
}
This JS SDK is driving me up the wall, while calling the documentation "incomplete" is an insult to incompleteness.
Any input will be appriciated.
Thank you!
-Elad
This has been deprecated by Facebook.
A new Graph API alternative will hopfuly be available by the time we need to deploy the app.
For now I use FQL:
FB.api({ method: 'fql.query', query: 'SELECT uid FROM page_fan WHERE uid= ' + user_id + ' AND page_id=145116742177104' },
function(result) {
if (result.length)
{ $('.main_frame').show(); $('#non_fan').hide(); } else { $('.main_frame').hide(); $('#non_fan').show(); }
});