Menu
I've created a fake facebook page (entertainment page). On the left of the attached image, I made a first post manually (the one below with the big photo), and one programmatically (the one above with the small photo).
The code I used for the small photo looks like this:
FB.api(
'https://graph.facebook.com/[myAppId]/feed',
'post',
{
message: 'this is a grumpy cat',
description: "This cat has been lost for decades now, please call at 654321486",
picture: "http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg"
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/' + response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
But I'm not happy with it: the application I'm working on make a list of lost animals, so it would be much greater with big photos.
I didn't see any example of how to do it on the facebook developer pages. I believe this is possible, but I've not found it out yet. Have you guys already gone through this problem before?
786
There are two things that you will need to do to achieve this. I'm not 100% sure if the JS-SDK will allow you to do the second step, but you can use a server side SDK if needed.
The application will need to request the manage_pages and publish_stream permission. Then make a call to /{user-id}/accounts which will return all pages the authorized user manages, and their respective page access tokens.
Store in a variable the page access token returned for the page you want to post to. Set the photo you want to upload as the source parameter (must be local to the server running the code) and make a POST request to /{page_id}/photos using the page access token (NOT the application access token!).
So it would be along the lines of:
FB.api('/{page_id}/photos', 'post', { source: 'path/to/image.jpg', access_token: {page_access_token}, message: 'hey heres a photo' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
I believe the application also needs to specify fileUpload as true when initializing.
I would be happy to share my PHP code to do this if it would be helpful to you.
113
Finally, I did it! I'm posting the solution, thanks to cdbconcepts for pointing me in the right direction. After reading the doc again:
https://developers.facebook.com/docs/reference/api/photo/
They say that: "You can also publish a photo by providing a url param with the photo's URL." The url doesn't have to be on the same server, as shown in the example below, and it works with the js-sdk.
So here is the final code that works for me:
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = 'Replace with your appId';
window.fbAsyncInit = function () {
FB.init({
appId: appId,
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
var options = {
scope: 'manage_pages, publish_stream'
};
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function () {
}, options);
} else {
FB.login(function () {
}, options);
}
});
};
// 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 + '.');
});
}
function error(msg) {
document.getElementById('result').innerHTML = 'Error: ' + msg;
}
function postApi() {
var myPageID = '484364788345193';
var targetPageName = 'Entertainment page of ling';
var pathToImg = 'http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg';
var accessToken = null;
FB.api(
'https://graph.facebook.com/me/accounts',
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
for (var i in response.data) {
if (targetPageName === response.data[i].name) {
accessToken = response.data[i].access_token;
}
}
if (accessToken) {
FB.api(
'https://graph.facebook.com/' + myPageID + '/photos',
'post',
{
url: pathToImg,
access_token: accessToken,
message: "Tadaam"
},
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
alert("PostId: " + response.id);
}
}
);
}
else {
error("Page not found in the accounts: " + targetPageName);
}
}
}
);
}
function logout() {
FB.logout();
}
$(document).ready(function () {
$("#logout").click(function () {
logout();
});
$("#post1").click(function () {
postApi();
});
});
</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 show-faces="true" width="200" max-rows="1"></fb:login-button>
<button id="logout">Logout</button>
<button id="post1">post something</button>
<div id="result"></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With