1.登入google API管理員
https://console.developers.google.com
1) 啟用google blog API
2) 申請OAuth 2.0用戶端ID 憑證
請記得設定授權的JavaScript來源 (因為是透過JavaScript)，故請設定執行的server ip / domain (PS.localhost是我為了測試用，正式需拿掉)
請記錄用戶端ID，此即後續開發會用到的client ID
3) 申請API金鑰 憑證
請記得設定接受這些HTTP參照網址(網站)發出的要求 (因為是透過JavaScript)，故請設定執行的server ip / domain (PS.localhost是我為了測試用，正式需拿掉)
請記錄API金鑰，此即後續開發會用到的API Key
2.請於初始時引用google api client javascript
https://apis.google.com/js/client.js?onload=init
3.檢核授權狀況
1) 授權button : Ex.id用authorize-button，已授權則會隱藏，未授權則需點選並確認授權，方可上傳文章，授權頁面如下
2) 上傳文章button : Ex.id用addPostButton
上傳文章後會顯示如下訊息框
3) javascript如下
function init() {
gapi.client.setApiKey(googleBlog.apiKey);
window.setTimeout(googleBlog.checkAuth,1);
gapi.client.load('blogger', 'v3', function() {
$("#addPostButton").click(googleBlog.addPost);
});
}
var googleBlog = {
blogId : '{請用您的Blog ID}',
clientId : '{請用剛申請的Client ID}',
apiKey : '{請用剛申請的API Key}',
scopes : 'https://www.googleapis.com/auth/blogger',
checkAuth : function () {
gapi.auth.authorize({client_id: googleBlog.clientId, scope: googleBlog.scopes, immediate: true},
googleBlog.handleAuthResult);
},
handleAuthResult : function (authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
//makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = googleBlog.handleAuthClick;
}
},
handleAuthClick : function (event) {
// 步驟3: 通過授權以存取資料
gapi.auth.authorize({client_id: googleBlog.clientId, scope: googleBlog.scopes,
immediate: false}, googleBlog.handleAuthResult);
return false;
},
addPost : function(event) {
event.preventDefault();
var blogIdVal = googleBlog.blogId;
var blogTitle = $('input[name=blogTitle]').val();
var blogContent = tinyMCE.get('blog_content').getContent({format : 'raw'});
blogContent = blogContent.replace(/(?:\r\n|\r|\n)/g, '');
blogContent = parseHTML(blogContent).getElementsByTagName('body')[0].innerHTML;
var save_data = JSON.stringify(blogContent); //以JSON字串存入
var formData = {'blogId': blogIdVal, fetchBody : true, fetchImages : true,
isDraft : true, 'title': blogTitle,'content':save_data};
var request = gapi.client.blogger.posts.insert(formData);
request.execute(function(response) {
console.log(response);
if (response.id) {
$('#modal-body-msg').text("文章上傳至google blog完成(草稿)，文章編號:" + response.id);
$('#messageModal').modal('show');
} else {
$('#modal-body-msg').text("文章上傳至google blog失敗");
$('#messageModal').modal('show');
}
});
}
}
上傳文章，我將其預設值用成"草稿"，須按"發佈"Button後才會對外發佈
葛麗絲的分享世界 