Send a canvas image to facebook from a website

Question

I've been trying to incorporate this code: https://github.com/lukasz-madon/heroesgenerator

And here is the sample he gives: http://www.heroesgenerator.com/

I have a drawing pad, and want to have a button that sends the drawing to facebook, but it gives me this error message:

"Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."

I'm not sure what could be wrong, but it's probably something stupid. Heres some of my code:

<button class="share" onclick="postCanvasToFacebook()">Share event on Facebook</button>

<div id="fb-root">
<canvas id="canvasPic"></canva
</div>

This canvasPic is where the drawing is.

Then I have his base64binary.js file directly copied and linked to in the html file.

Then I have his script.js file, but modified. I changed very little - I just erased the part that draws a new canvas, and changed the id of the canvas to "canvasPic":

// from: http://stackoverflow.com/a/5303242/945521
if ( XMLHttpRequest.prototype.sendAsBinary === undefined ) {
    XMLHttpRequest.prototype.sendAsBinary = function(string) {
        var bytes = Array.prototype.map.call(string, function(c) {
            return c.charCodeAt(0) & 0xff;
        });
        this.send(new Uint8Array(bytes).buffer);
    };
};

(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'));

window.fbAsyncInit = function() {
    FB.init({
      appId  : "404477149649756",
      status : true, 
      cookie : true, 
      xfbml  : true  // parse XFBML
    });
};

function postImageToFacebook( authToken, filename, mimeType, imageData, message )
{
    // this is the multipart/form-data boundary we'll use
    var boundary = '----ThisIsTheBoundary1234567890';   
    // let's encode our image file, which is contained in the var
    var formData = '--' + boundary + '\r\n'
    formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
    formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
    for ( var i = 0; i < imageData.length; ++i )
    {
        formData += String.fromCharCode( imageData[ i ] & 0xff );
    }
    formData += '\r\n';
    formData += '--' + boundary + '\r\n';
    formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
    formData += message + '\r\n'
    formData += '--' + boundary + '--\r\n';

    var xhr = new XMLHttpRequest();
    xhr.open( 'POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true );
    xhr.onload = xhr.onerror = function() {
        console.log( xhr.responseText );
    };
    xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary );
    xhr.sendAsBinary( formData );
};

var canvasPic = document.getElementById("canvasPic");

var authToken;

function postCanvasToFacebook() {
    var data = canvasPic.toDataURL("image/png");
    var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
    var decodedPng = Base64Binary.decode(encodedPng);
    FB.getLoginStatus(function(response) {
      if (response.status === "connected") {    
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
  } else if (response.status === "not_authorized") {
     FB.login(function(response) {
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
     }, {scope: "publish_stream"});
  } else {
     FB.login(function(response)  { 
        postImageToFacebook(response.authResponse.accessToken, "DrawIt", "image/png", decodedPng, "http://www.fishfactorymedia.com/DrawIt/draw.html");
     }, {scope: "publish_stream"});
  }
 }); 

};