Posting canvas image to user's wall via facebook javascript sdk

Question

I have dynamically created a html canvas image. I want to post it to facebook user's wall via javascript sdk. What I am doing is

I tried to convert canvas into a javascript image object & provide finalimage in fb.ui method

var temp = canvas.toDataURL("image/png"); 
var finalimage=temp.replace(/^data:image\/(png|jpg);base64,/, "");

  FB.ui(
  {
   method: 'feed',
   name: 'The Facebook SDK for Javascript',
   caption: 'Bringing Facebook to the desktop and mobile web',
   description: (
   'A small JavaScript library that allows you to harness ' +
   'the power of Facebook, bringing the user\'s identity, ' +
   'social graph and distribution power to your site.'
   ),
 link: 'https://developers.facebook.com/docs/reference/javascript/',
 picture: finalimage
   },
  function(response) {
  if (response && response.post_id) {
  alert('Post was published.');
  } else {
  alert('Post was not published.');
  }
  }
   );

But I am getting an error

Error Message: picture URL is not properly formatted

Can anyone please help how do I do that??

David Augustus David Augustus · Accepted Answer · 2016-01-02T19:33:31

You need to save the image at your server for doing that, your image must be outside Facebook, because FB.ui "FEED" does not accept base64 encoded data as picture, its impossible .

Its very large data, and if you try to short the base64 code into a url shorteer, you will find difficulties too .

What you can do, and what i am doing, is use an PHP server to get the Base64 data, and convert it into image, like a dynamic image, ok? But a memory problem will be created .

Another option is (really) posting the canvas as an image on user profile, so you will need use FB.api for that, instead of FB.ui, feed dialog is used for sharing links, and, canvas doesnt have Title, Description, proprieties .

After posting the image, you will get an response, with ID, that is post ID, and this cannot be used on Feed as Link or Image proprietity, but you can use Share Dialog, if you want to share the post .

That is piece of cake, i done that, and recommend you do the same . Posting Canvas as images usin API on Facebook Platform is great, you can do that using JavaScript SDK .

Posting canvas image to user's wall via facebook javascript sdk

1 Answers