BloggerScript adalah script yang membantu dalam mengambil feeds data dari website berbasis blogspot atau Blogger. Dengan adanya BloggerScript yang dulu script nya sangat panjang maka akan menjadi lebih pendek sehingga lebih mudah di gunakan.
Perbandingan BloggerScript
Berikut adalah perbandingan script yang menggunakan BloggerScript dan yang tidak. Disini saya mencoba akan mengambil postingan dari suatu web.
Tanpa BloggerScript
Berikut adalah script yang sangat sering di pakai pada tutorial ketika ingin mengambil postingan dari feeds blogger.
function getPost(feeds) {
if (feeds.feed && feeds.feed.entry) {
feeds.feed.entry.forEach(post => {
let title = post.title.$t,
link = post.link.find(i => 'alternate' == i.rel).href,
label = post.category.map(i => i.term),
image;
/* Memngambil gambar */
if ('media$thumbnail' in post) {
/* mengubah ukuran gambar */
image = post.media$thumbnail.url.replace('s72-c', 'w100-h100-p-k-no-nu');
} else {
if ('content' in post) {
let s = post.content.$t,
a = s.indexOf("<img"),
b = s.indexOf("src=\"", a),
c = s.indexOf("\"", b + 5),
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
/* Mengambil gambar dari postingan jika thumbnail tidak ada */
image = d;
} else {
image = 'no_image_url';
}
} else {
image = 'no_image_url';
}
}
/* Script lanjutan untuk membuat html.... */
/*............*/
console.log(title);
console.log(link);
console.log(image);
});
}
}Kemudian script tersebut akan dieksekusi dengan kode dibawah.
<script src='http://www.dayat.id/feeds/posts/default?alt=json&max-results=10&callback=getPost'></script>Script nya cukup panjang terutama fungsi yang di gunakan untuk mengambil gambar.
Dengan BloggerScript
Function script di atas akan di ubah menyesuaikan fungsi BloggerScript.
function getPost(feeds) {
if (feeds.length > 0) {
feeds.forEach(post => {
let title = post.title,
link = post.link,
image = post.image;
/* Script lanjutan untuk membuat html.... */
/*............*/
console.log(title);
console.log(link);
console.log(image);
})
}
}Dan script akan dieksekusi dengan kode di bawah.
let bS = new BloggerScript({
'host': 'www.dayat.id',
'jumlah': 10,
'noImage': 'no_image_url',
'sizeImage': 'w100-h100-p-k-no-nu'
});
bS.run(getPost);Atau bisa juga dengan cara seperti ini.
let bS = new BloggerScript({
'host': 'www.dayat.id',
'jumlah': 10,
'noImage': 'no_image_url',
'sizeImage': 'w100-h100-p-k-no-nu'
});
bS.run((feeds) => {
if (feeds.length > 0) {
feeds.forEach(post => {
let title = post.title,
link = post.link,
image = post.image;
/* Script lanjutan untuk membuat html.... */
/*............*/
console.log(title);
console.log(link);
console.log(image);
})
}
});Lihat perbandingan nya BloggerScript terlihat lebih singkat dan rapih daripada yang tidak menggunakan BloggerScript.
Tentu saja penggunaan BloggerScript tidak terbatas pada ini saja. BloggerScript juga bisa di gunakan untuk membuat Related Posts, Random Post, Sitemap (lebih dari 150 post) dan Daftar Komentar.
Fungsi Turunan
Berikut adalah daftar fungsi turunan atau bawaan yang ada di BloggerScript.
config
Contoh penggunaan config. Bagian yang di tandai adalah config.
let bS = new BloggerScript({
'host': 'www.dayat.id',
'jumlah': 10,
'noImage': 'no_image_url',
'sizeImage': 'w100-h100-p-k-no-nu'
});Config sendiri bisa diambil dan diubah jika diinginkan, contoh script ketika ingin mengubah dan mengambil data host.
/* mengubah config */
bS.config.host = 'www.blogger.com';
/* mengambil config */
let host = bS.config.host;
console.log(host);
/* bisa juga seperti ini */
console.log(bS.config.host);Untuk data yang bisa digunakan ada di table ini.
| Key | Value | Bawaan | Keterangan |
|---|---|---|---|
host |
www.dayat.id |
host bawaan web. | Opsional: jika situs kalian berbeda dengan host yang akan di isi, maka ini menjadi wajib. |
feed |
default / summary |
default |
default: Mengambil semua isi postingan, summary: Mengambil isi postingan versi pendek. |
type |
posts / comments / pages |
posts |
Type feed yang akan di ambil postingan / commment / halaman. |
jumlah |
50 |
10 |
Jumlah feed yang akan di ambil |
max-results |
50 |
10 |
sama seperti data jumlah, jika sudah menggukan data jumlah maka ini tidak diperlukan. |
label |
Blogger |
false |
Khusus data type posts misal jika ingin postingan dengan label tertentu saja yang muncul. |
category |
Blogger |
false |
Sama seperti data label, jika sudah menggukan data label maka ini tidak diperlukan. |
q |
Cara Menggunakan dst... |
false |
Khusus data type posts misal jika ingin postingan dengan judul Cara Menggunakan dst.. saja yang muncul. |
orderby |
published / updated |
published |
Mengurutkan postingan secara terbaru atau terupdate. |
noImage |
Url no image |
false |
Jika postingan tidak mempunyai gambar maka akan diganti dengan gambar ini. |
sizeImage |
s0 / w400 / w400-h400 dst... |
false |
Mengubah ukuran gambar sesuai value. |
resizeImage
Sesuai nama nya digunakan untuk mengubah ukuran gambar. Contoh:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2oGmAU199JCD6JdThHAAA7dMeMybpRkpnU0SCcuErqEwn4G7MbtUTOWvYAJONssUkBuZ8Ok3dCEMouh1SpH2XGdFGuA7fl5uf4Z4eZno7cZrmpc5Zivkfp6XKlZdSjf1ZuP3lkpThzXF3UoN8jsG-3aL7mMyAKqGLlOoh1nLse9aQBx8P_eMSixmzA/s72-c/DAYAT.ID.pngGambar diatas ukuran gambar nya adalah lebar: 72, tinggi: 72. Dan jika ingin di ganti maka caranya:
let image = ''https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2oGmAU199JCD6JdThHAAA7dMeMybpRkpnU0SCcuErqEwn4G7MbtUTOWvYAJONssUkBuZ8Ok3dCEMouh1SpH2XGdFGuA7fl5uf4Z4eZno7cZrmpc5Zivkfp6XKlZdSjf1ZuP3lkpThzXF3UoN8jsG-3aL7mMyAKqGLlOoh1nLse9aQBx8P_eMSixmzA/s72-c/DAYAT.ID.png';
image = bS.resizeImage(image, 's480-c');
console.log(image);Ukuran gambar yang akan dihasilkan lebar: 480, tinggi: 480.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2oGmAU199JCD6JdThHAAA7dMeMybpRkpnU0SCcuErqEwn4G7MbtUTOWvYAJONssUkBuZ8Ok3dCEMouh1SpH2XGdFGuA7fl5uf4Z4eZno7cZrmpc5Zivkfp6XKlZdSjf1ZuP3lkpThzXF3UoN8jsG-3aL7mMyAKqGLlOoh1nLse9aQBx8P_eMSixmzA/s480-c/DAYAT.ID.pngsort
Mengurutkan posts berdasarkan [A-Z] / [Z-A] / [Update] / [Added].
bS.run((entry) => {
let posts;
/* A-Z */
posts = bS.sort(entry, 'A-Z');
/* Z-A */
posts = bS.sort(entry, 'Z-A');
/* Update */
posts = bS.sort(entry, 'Update');
/* Added */
posts = bS.sort(entry, 'Added');
console.log(posts);
})xhr / xhr2
Versi manual dari fungsi run
bS.xhr('/feeds/posts/default?alt=json-in-script&max-results=10', (feeds) => {
let feed = bS.getFeed(feeds);
console.log(feed);
});Gunakan xhr2 jika alamat situs nya berbeda.
run
Versi auto dari fungsi xhr / xhr2
bS.run((entry) => {
console.log(entry);
});getFeed
Convert data bawaan blogger ke versi BloggerScript. Contoh:
/* kode awal */
{
'title': {
'$t': 'Judul Postingan'
}
}
/* diubah menjadi */
{
'title': 'Judul Postingan'
}Data yang dihasilkan getFeed adalah sebagai berikut:
| Key | Value |
|---|---|
title |
string |
link |
string |
id |
string |
image |
string |
label |
array |
author |
object |
published |
string |
updated |
string |
content |
string |
summary |
string |
date |
string |
Contoh dalam object.
{
"id": "post_id",
"title": "post_title",
"link": "post_url",
"image": "no_image_url",
"content": "post_content",
"label": ["label_1", "label_2"],
"date": "06 Mar 2024",
"published": "2023-09-30T04:48:00.002-07:00",
"updated": "2023-09-30T04:48:24.519-07:00",
"author": {
"name": "author_name",
"uri": "author_url",
"image": "author_image"
},
"comments_count": "total_komentar"
}Contoh penggunaan getFeed ada di bagian fungsi xhr.
BloggerRandom
Mengambil postingan secara acak.
let bRandom = new BloggerRandom({
'host': 'www.dayat.id',
'jumlah': 10,
});
bRandom.run((entry) => {
console.log(entry);
});BloggerRelated
Mengambil postingan berdasarkan beberapa label tertentu.
let bRelat = new BloggerRelated({
'host': 'www.dayat.id',
'label': ['Blogger', 'Desain Web'],
'jumlah': 10,
});
bRelat.run((entry) => {
console.log(entry);
});Cara kerja blogger related ada di bagian data config label, misal jika label nya hanya satu saja lebih baik menggunakan BloggerRandom saja.
Contoh: data config label diisi 4 macam label. Maka postingan yang di dapat menjadi 40 buah, kemudian data config jumlah diisi dengan nilai 10. Maka 40 buah posts tadi akan di filter secara acak menjadi 10 buah saja.
BloggerSitemap
Di karenakan setiap request feeds blogger hanya bisa menampilkan 150 postingan saja. Maka script ini adalah solusi nya.
let bSitemap = new BloggerSitemap({
'host': 'www.dayat.id'
});
bSitemap.run((data) => {
console.log(data.posts);
});Disini data callback nya berbeda. Berikut datanya:
{
'totalGet': 0,
'totalPosts': 150,
'posts': [daftar_postingan],
'completed': true
}Fungsi Turunan alphaSort
Fungsi ini berguna untuk memfilter postingan berdasarkan huruf pertama pada judul postingan, dan berikut cara penggunaan nya.
let bSitemap = new BloggerSitemap({
'host': 'www.dayat.id'
});
bSitemap.run((data) => {
let alphabet = bSitemap.alphaSort(data.posts);
console.log(data.posts);
console.log(alphabet);
/* Contoh hasil dari alphabet */
[{
'id': 'a',
'posts': [daftar_postingan_a]
}, {
'id': 'b',
'posts': [daftar_postingan_b]
}, {
'dst.....'
}]
});BloggerComments
Mengambil daftar komentar dari semua postingan atau hanya postingan tertentu saja.
let bC = new BloggerComments({
'host': 'www.dayat.id',
'jumlah': 10
});
bC.run((entry) => {
console.log(entry);
});Kode diatas akan menampilkan komentar dari semua postingan yang ada. Sedangkan kode di bawah hanya komentar di postingan tertentu saja.
let bC = new BloggerComments({
'host': 'www.dayat.id',
'jumlah': 10,
'type': {
'name': 'comments',
'id': 'post_id'
}
});
bC.run((entry) => {
console.log(entry);
});Pada kode diatas hanya perlu menambah data type dengan post_id maka akan menampilkan daftar komentar berdasarkan post tersebut saja.
Dan berikut data yang akan di dapat.
[{
"title": "Comment_title",
"content": "Comments_content",
"id": "comment_id",
"post-id": "post_id",
"post-source": "post-source",
"link": "post_link",
"published": "2024-03-06T04:59:23.579+07:00",
"date": "06 Mar 2024",
"updated": "2024-03-06T04:59:23.579+07:00",
"author": {
"name": "author_name",
"image": "author_image",
"uri": "author_url"
}
}]Fungsi turunan getPostInfo
Di karenakan kode pemanggil pertama info postingan tidak tersedia data nya maka di buat lah fungsi turunan yang akan mengambil postingan info tersebut. Berikut cara menggunakan nya.
let bC = new BloggerComments({
'host': 'www.dayat.id',
'jumlah': 10
});
bC.run((entry) => {
let newEntry = bC.getPostInfo(entry);
console.log(newEntry);
});Berikut data yang akan dihasilkan.
[{
"title": "Comment_title",
"content": "Comments_content",
"id": "comment_id",
"post-id": "post_id",
"post-info": {
"id": "post_id",
"title": "post_title",
"link": "post_url",
"image": "no_image_url",
"content": "post_content",
"label": ["label_1", "label_2"],
"date": "06 Mar 2024",
"published": "2023-09-30T04:48:00.002-07:00",
"updated": "2023-09-30T04:48:24.519-07:00",
"author": {
"name": "author_name",
"uri": "author_url",
"image": "author_image"
},
"comments_count": "total_komentar"
},
"post-source": "post-source",
"link": "post_link",
"published": "2024-03-06T04:59:23.579+07:00",
"date": "06 Mar 2024",
"updated": "2024-03-06T04:59:23.579+07:00",
"author": {
"name": "author_name",
"image": "author_image",
"uri": "author_url"
}
}]Source Code
- Github: BloggerScript
Changelog
V3
06, Mar 2024
- Rilis
-
Perubahan dalam fungsi run di semua script
Yang awal nya seperti ini. (V2)
let bR = new BloggerRandom({ 'jumlah': 10 }); bR.run('https://blog_url.blogspot.com/feeds/posts/default', function(entry) { console.log(entry); });Berubah seperti ini. (V3)
let bR = new BloggerRandom({ 'host': 'blog_url' 'jumlah': 10 }); bR.run(function(entry) { console.log(entry); }); - Penambahan fitur getPostInfo pada BloggerComments. (tersedia juga di V2)
- Bug Fixes lainnya.
