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"});
}
});
};