CODEWITHSUNDEEP
facebookcanvasshare
Digamber
Digamber

Reputation: 448

Share Canvas Images to Facebook

Hi Guys i'm at the last step of this project, i've saved my Canvas image on server side and was hoping to now be able to change the share thumbnail for Facebook. Below is the code up to the sharing part.

jQuery(document).ready(function($){
//Share the current Canvas Image to Facebook
jQuery(document).on('click','#poster',function(e){
  e.preventDefault();
  /*Save to server*/
  var canvas = document.getElementById("c");
  var imageData = canvas.toDataURL("image/png");
  $.ajax({
  type: "POST",
  url: rkax.ajaxurl,
  data: { 
         action: 'raketrad_save_to_server',
         imgBase64: imageData
  }
}).done(function(img_url) {
  console.log(img_url);
 $('body').append('<meta property="og:image" content="'+img_url+'" />');
 FB.ui({
        method: 'share',
        href: window.location.href,
      }, function(response){});

});

I am finding that even when the meta property has been appended to the page. Facebook still takes the default URL. How do i go about chaning this?

Upvotes: 0

Views: 2343

Answers (2)

Digamber
Digamber

Reputation: 448

I couldn't get the share feature going but the feed worked for me

 FB.ui({
  method: 'feed',
  link: window.location.href,
  picture: img_url,
 }, function(response){});

hope this helps anyone else looking for something like this

Upvotes: 2

Marco Sandrini
Marco Sandrini

Reputation: 688

Adding the opengraph metatags on the local browser version does not work, because the facebook crawler will scrape the "server version" of the page. What you should do, as part of the 'raketrad_save_to_server' action, is to store the appropriate information on your server, so that the page served at the url you pass to the FB.ui/share method will contain the correct meta properties.

Upvotes: 0

Related Questions