liamegan · February 6, 2019 01:17
diff --git a/Basic facebook publish image code b/Basic facebook publish image code
 <!DOCTYPE html>
 <html>
  <head></head>
  <body>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '2280604068667472',
          cookie     : true,
          xfbml      : true,
          version    : 'v3.2'
        });
          
        FB.AppEvents.logPageView();   
          
      };

      (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 = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

    <canvas id="canvas1"></canvas>
    <button id="shareToFB">Share this to facebook</button>
    <script>
      let button = document.getElementById("shareToFB");

      let c = document.getElementById("canvas1");
      c.width = 500;
      c.height = 500;
      let ctx = c.getContext('2d');

      ctx.fillStyle = '#CCEEFF';
      ctx.fillRect(0,0,500,500);
      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(250, 250, 100, 0, Math.PI*2);
      ctx.fill();

      const dataURItoBlob = (dataURI) => {
        var byteString = atob(dataURI.split(',')[1]);
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/png'});
      }

      const clickHandler = () => {
        var data = c.toDataURL("image/png");
        try {
            blob = dataURItoBlob(data);
        } catch (e) {
            console.log(e);
        }
        FB.getLoginStatus(function (response) {
            console.log(response);
            if (response.status === "connected") {
                postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
            } else if (response.status === "not_authorized") {
                FB.login(function (response) {
                    postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
                }, {scope: "publish_actions"});
            } else {
                FB.login(function (response) {
                    postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
                }, {scope: "publish_actions"});
            }
        });
      }

      function postImageToFacebook(token, filename, mimeType, imageData, message) {
        var fd = new FormData();
        fd.append("access_token", token);
        fd.append("source", imageData);
        fd.append("no_story", true);

        console.log(fd);

        const request = new XMLHttpRequest();
        request.open('POST', "https://graph.facebook.com/me/photos?access_token=" + token, true);

 //        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(fd);

        request.onload = function() {
          if (this.status >= 200 && this.status < 400) {
            // Success!
            var data = JSON.parse(this.response);
            console.log("success: ", data);

            // Get image source url
            FB.api(
              "/" + data.id + "?fields=images",
              function (response) {
                if (response && !response.error) {
                  //console.log(response.images[0].source);

                  // Create facebook post using image
                  FB.api(
                    "/me/feed",
                    "POST",
                    {
                      "message": "",
                      "picture": response.images[0].source,
                      "link": window.location.href,
                      "name": 'Look at me as a pokemon trainer!',
                      "description": message,
                      "privacy": {
                        value: 'SELF'
                      }
                    },
                    function (response) {
                      if (response && !response.error) {
                        /* handle the result */
                        console.log("Posted story to facebook");
                        console.log(response);
                      }
                    }
                  );
                }
              }
            );
          } else {
            // We reached our target server, but it returned an error

          }
        };

        request.onerror = function(err) {
          console.log(err);
        };
      }

      button.addEventListener('click', clickHandler);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>
	<script>
	window.fbAsyncInit = function() {
	FB.init({
	appId : '2280604068667472',
	cookie : true,
	xfbml : true,
	version : 'v3.2'
	});

	FB.AppEvents.logPageView();

	};

	(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 = "https://connect.facebook.net/en_US/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>

	<canvas id="canvas1"></canvas>
	<button id="shareToFB">Share this to facebook</button>
	<script>
	let button = document.getElementById("shareToFB");

	let c = document.getElementById("canvas1");
	c.width = 500;
	c.height = 500;
	let ctx = c.getContext('2d');

	ctx.fillStyle = '#CCEEFF';
	ctx.fillRect(0,0,500,500);
	ctx.fillStyle = 'black';
	ctx.beginPath();
	ctx.arc(250, 250, 100, 0, Math.PI*2);
	ctx.fill();

	const dataURItoBlob = (dataURI) => {
	var byteString = atob(dataURI.split(',')[1]);
	var ab = new ArrayBuffer(byteString.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < byteString.length; i++) {
	ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ab], {type: 'image/png'});
	}

	const clickHandler = () => {
	var data = c.toDataURL("image/png");
	try {
	blob = dataURItoBlob(data);
	} catch (e) {
	console.log(e);
	}
	FB.getLoginStatus(function (response) {
	console.log(response);
	if (response.status === "connected") {
	postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
	} else if (response.status === "not_authorized") {
	FB.login(function (response) {
	postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
	}, {scope: "publish_actions"});
	} else {
	FB.login(function (response) {
	postImageToFacebook(response.authResponse.accessToken, "Pokemon trainer image maker", "image/png", blob, window.location.href);
	}, {scope: "publish_actions"});
	}
	});
	}

	function postImageToFacebook(token, filename, mimeType, imageData, message) {
	var fd = new FormData();
	fd.append("access_token", token);
	fd.append("source", imageData);
	fd.append("no_story", true);

	console.log(fd);

	const request = new XMLHttpRequest();
	request.open('POST', "https://graph.facebook.com/me/photos?access_token=" + token, true);

	// request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	request.send(fd);

	request.onload = function() {
	if (this.status >= 200 && this.status < 400) {
	// Success!
	var data = JSON.parse(this.response);
	console.log("success: ", data);

	// Get image source url
	FB.api(
	"/" + data.id + "?fields=images",
	function (response) {
	if (response && !response.error) {
	//console.log(response.images[0].source);

	// Create facebook post using image
	FB.api(
	"/me/feed",
	"POST",
	{
	"message": "",
	"picture": response.images[0].source,
	"link": window.location.href,
	"name": 'Look at me as a pokemon trainer!',
	"description": message,
	"privacy": {
	value: 'SELF'
	}
	},
	function (response) {
	if (response && !response.error) {
	/* handle the result */
	console.log("Posted story to facebook");
	console.log(response);
	}
	}
	);
	}
	}
	);
	} else {
	// We reached our target server, but it returned an error

	}
	};

	request.onerror = function(err) {
	console.log(err);
	};
	}

	button.addEventListener('click', clickHandler);
	</script>
	</body>
	</html>