BloggerScript: Javascript library khusus Blogger - Update V3

BloggerScript adalah script yang membantu dalam mengambil feeds data dari website berbasis blogspot atau Blogger . Dengan adanya BloggerScript yang du…
BloggerScript: Javascript library khusus Blogger

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.png

Gambar 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.png

sort

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);
});

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

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.
5
BloggerScript: Javascript library khusus Blogger - Update V3
BloggerScript: Javascript library khusus Blogger - Update V3
BloggerScript adalah script yang membantu dalam mengambil feeds data dari website berbasis blogspot atau Blogger . Dengan adanya BloggerScript yang du…
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

5 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Yukine
    Wednesday, March 06, 2024
    Profile: https://www.blogger.com/profile/16537327212291797418
    wah ada update, tapi saran saja bang tambahkan info update agar tau apa saja yang baru dari versi sebelumnya.
  • Wernayasa
    Wednesday, March 13, 2024
    Profile: https://www.blogger.com/profile/09171272848542294839
    Baru tau webnya dibuka kembali.
  • Baca komik
    Saturday, June 22, 2024
    Profile: https://www.blogger.com/profile/05583155505950172982
    This comment has been removed by the author.
    • Baca komik
      Saturday, June 22, 2024
      Profil: https://www.blogger.com/profile/05583155505950172982
      This comment has been removed by the author.