Skip to content

Instantly share code, notes, and snippets.

@motephyr
Last active August 29, 2015 14:14
Show Gist options
  • Save motephyr/87a699c044122f8a7ad8 to your computer and use it in GitHub Desktop.
Save motephyr/87a699c044122f8a7ad8 to your computer and use it in GitHub Desktop.
將canvas圖片發送至FB粉絲專頁
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI(response.authResponse.accessToken);
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
//checkLoginState();
};
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<input id="login" type="button" value="Login to FB">
<div id="status">
</div>
<%= javascript_include_tag "canvas-to-blob.js" %>
<script type="text/javascript">
var login = document.getElementById("login");
login.addEventListener("click",function() {
FB.login(function(response) {
checkLoginState();
}, {
scope: 'publish_actions',
return_scopes: true
});
},false);
function testAPI(token) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
//102128959842877,1027783900583168
FB.api('102128959842877/feed', 'get', function(response) {
if (!response || response.error) {
console.log(response.error);
} else {
test = response;
console.log(response);
var imageObj = new Image();
imageObj.onload = function () {
var callbackDone = function(formData) {
// FB.api(response.data[0].id+'/comments', 'post', object, function(response) {
// if (!response || response.error) {
// console.log(response.error);
// } else {
// alert('Post ID: ' + response.id);
// }
// });
$.ajax({
url: "https://graph.facebook.com/"+ response.data[0].id +"/comments?access_token=" + token,
type: "POST",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("success " + data);
$("#poster").html("Posted Canvas Successfully");
},
error: function (shr, status, data) {
console.log("error " + data + " Status " + shr.status);
},
complete: function () {
console.log("Posted to facebook");
}
});
};
createBlob.call(this,token,callbackDone);
};
imageObj.crossOrigin = "*";
imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/5/5c/It-%E5%AD%97.png';
}
});
};
var createBlob = function(token,callback){
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, this.width, this.height);
if (canvas.toBlob) {
canvas.toBlob(function (blob) {
publishtoFB(blob,token,callback);
}, 'image/png');
}
}
var publishtoFB = function(blob,token,callback){
var formData = new FormData();
formData.append('source', blob);
var object = {
source: formData,
access_token: token
};
callback(formData);
}
</script>
</body>
</html>
@motephyr
Copy link
Author

1.FB的api需要填app_id,和secret用以認證是這個應用程式的連線要求。
2.FB.login需要要求權限publish_actions,都同意才能po文,從respnose get token value.
3.FB.api('1027783900583168/feed', 'get',.....) get feed list.
4.publish(用一般發request的方式發,FB.api試不出來)
var formData = new FormData();
formData.append('source', blob);
$.ajax({
url: "https://graph.facebook.com/"+ response.data[0].id +"/comments?access_token=" + token,
type: "POST",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("success " + data);
$("#poster").html("Posted Canvas Successfully");
},
error: function (shr, status, data) {
console.log("error " + data + " Status " + shr.status);
},
complete: function () {
console.log("Posted to facebook");
}
});

@motephyr
Copy link
Author

fix FB.api

var publishtoFB = function(blob,token,callback){
var object = {
source: blob,
access_token: token
};
callback(formData);

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment