admin menggunakan Blogger APi untuk meminta Authorize dari Server
code ini bisa anda tempatkan di halaman page ataupun post atau di widget javascript dihalaman layout. mohon diperhatikan cara tata letak penempatan kode kode dibawah ini
buat halaman baru/page di blogger dan copy paste kode berikut:
Beri judul page tersebut dan simpan
SIAPKAN DATA FIREBASE/GOOGLE ID ANDA DULU
1. CLIENT ID google
2. Redirect URL
3. API KEY
4. BLOGID
Kode dibawah akan meminta token ke server kemudian setelah di Authorize oleh pemilik server, maka token akan diserahkan ke user untuk melakukan CRUD diBlogger tersebut.
TOKEN hanya berlaku selama 24 Jam setelah 24 Jam, User harus meminta token kembali.
<h2>Management Postingan di Blogger</h2>
<br>
Silahkan meminta token dari Server<br>
<button onclick="authorize()">Minta TOKEN</button>
<br>
<br>
<script>
// Ganti dengan informasi aplikasi OAuth 2.0 Anda
var clientId = 'CLIENTID-ANDA.apps.googleusercontent.com';
var redirectUri = 'https://REDIRECTURL-ANDA?';
var scope = 'https://www.googleapis.com/auth/blogger';
function authorize() {
// Bangun URL untuk otorisasi
var authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=token`;
// Redirect ke URL otorisasi
window.location.href = authUrl;
}
</script>
<h3>Create Blogger Post</h3>
<form id="blogPostForm">
<label for="title">Judul Post:</label><br>
<input type="text" id="title" name="title" required>
<br>
<label for="content">Konten:</label><br>
<textarea id="content" name="content" required></textarea>
<label for="labels">Label (pisahkan dengan koma):</label><br>
<input type="text" id="labels" name="labels"><br>
<input type="submit" value="Create Post">
</form>
<script>
// Mengekstrak token akses dari fragmen URL
var accessToken = window.location.hash.substring(1)
.split('&')
.find(param => param.startsWith('access_token='))
.split('=')[1];
// Ganti dengan API key yang diberikan
var apiKey = 'API-KEY-ANDA';
document.getElementById('blogPostForm').addEventListener('submit', function (e) {
e.preventDefault();
// Ambil data formulir
var judul = document.getElementById('title').value;
var konten = document.getElementById('content').value;
var labels = document.getElementById('labels').value.split(',');
// Persiapkan data untuk Blogger API
var data = {
kind: 'blogger#post',
blog: {
id: 'BLOGID-ANDA' // ID blog yang telah Anda berikan
},
title: judul,
content: konten,
labels: labels
};
// Kirim data ke Blogger API menggunakan Fetch API
fetch('https://www.googleapis.com/blogger/v3/blogs/BLOGID-ANDA/posts?key=' + apiKey, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + accessToken
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
// Tanggapan dari Blogger API (jika diperlukan)
console.log('Sukses:', data);
})
.catch((error) => {
console.error('Error:', error);
});
});
</script>
----------------------
<h1>List POST ID</h1>
<form id="searchForm">
<label for="searchTitle">Cari berdasarkan Judul:</label>
<input type="text" id="searchTitle" name="searchTitle">
<label for="dateFilter">Filter Tanggal:</label>
<select id="dateFilter" name="dateFilter">
<option value="">Semua Waktu</option>
<option value="1w">1 Minggu</option>
<option value="2w">2 Minggu</option>
<option value="3w">3 Minggu</option>
<option value="1m">Di Atas 1 Bulan</option>
</select>
<button type="submit">Cari</button>
</form>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Judul</th>
<th>Post Created</th>
<th>Delete <input type="checkbox" id="selectAllDelete"></th>
</tr>
</thead>
<tbody id="postsTableBody"></tbody>
</table>
<button id="deleteSelected">Delete Selected</button>
<script>
var accessToken = window.location.hash.substring(1)
.split('&')
.find(param => param.startsWith('access_token='))
.split('=')[1];
var apiKey = 'AIzaSyA-1HZK_tph6cKr2GsxS8QXFEL6g2b3OmU';
var blogId = '8707042968805783880';
function fetchAndDisplayPosts(title = '', dateFilter = '') {
fetch('https://www.googleapis.com/blogger/v3/blogs/' + blogId + '/posts?key=' + apiKey, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + accessToken
},
})
.then(response => response.json())
.then(data => {
var postsTableBody = document.getElementById('postsTableBody');
postsTableBody.innerHTML = '';
var currentDate = new Date();
data.items.forEach(post => {
if (title === '' || post.title.toLowerCase().includes(title.toLowerCase())) {
if (filterByDate(post.published, currentDate, dateFilter)) {
var row = postsTableBody.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = post.id;
cell2.innerHTML = post.title;
cell3.innerHTML = new Date(post.published).toLocaleString();
var deleteCheckbox = document.createElement('input');
deleteCheckbox.type = 'checkbox';
deleteCheckbox.value = post.id;
deleteCheckbox.name = 'deleteSelected';
cell4.appendChild(deleteCheckbox);
row.setAttribute('data-post-id', post.id);
}
}
});
})
.catch((error) => {
console.error('Error:', error);
});
}
function filterByDate(postDate, currentDate, filter) {
var timeDiff = currentDate - new Date(postDate);
var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
switch (filter) {
case '1w':
return daysDiff <= 7;
case '2w':
return daysDiff > 7 && daysDiff <= 14;
case '3w':
return daysDiff > 14 && daysDiff <= 21;
case '1m':
return daysDiff > 30;
default:
return true;
}
}
function deletePost(postId) {
fetch('https://www.googleapis.com/blogger/v3/blogs/' + blogId + '/posts/' + postId + '?key=' + apiKey, {
method: 'DELETE',
headers: {
'Authorization': 'Bearer ' + accessToken
},
})
.then(response => {
if (response.ok) {
console.log('Posting berhasil dihapus');
var row = document.getElementById('postsTableBody').querySelector('tr[data-post-id="' + postId + '"]');
row.parentNode.removeChild(row);
} else {
console.error('Gagal menghapus posting. Status:', response.status);
}
})
.catch((error) => {
console.error('Error:', error);
});
}
document.getElementById('searchForm').addEventListener('submit', function (e) {
e.preventDefault();
var searchTitle = document.getElementById('searchTitle').value;
var dateFilter = document.getElementById('dateFilter').value;
fetchAndDisplayPosts(searchTitle, dateFilter);
});
document.getElementById('deleteSelected').addEventListener('click', function () {
var selectedCheckboxes = document.querySelectorAll('input[name="deleteSelected"]:checked');
selectedCheckboxes.forEach(checkbox => {
deletePost(checkbox.value);
});
});
document.getElementById('selectAllDelete').addEventListener('change', function () {
var checkboxes = document.querySelectorAll('input[name="deleteSelected"]');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
fetchAndDisplayPosts();
</script>
di halaman tujuan Lihat Demo ingat bahwa Server adalah Admin pemilik BloggID, jadi User tidak akan mendapatkan ijin jika menggunakan blog Demo. Gunakan BlogID anda sendiri untuk melihat efek nya
Lihat Demo
Jika ada pertanyaan silahkan gunakan komentar dibawah
Post a Comment