Membuat Facebox/Like Box Preloader ~ Mas Dzaky Blog

Selasa, 12 Agustus 2014

Di sini Saya menggunakan metode Iframe Preloader yang pernah Saya tuliskan untuk menahan proses muat widget Facebox pada blog. Dengan cara ini maka proses muat halaman akan menjadi lebih cepat karena kita telah menahan Facebox untuk memuat sebelum keseluruhan halaman berhasil termuat:

Lihat Demo

Sebelum melanjutkan ke langkah pembuatannya (atau lebih tepatnya: langkah modifikasi), Anda harus sudah memiliki widget Facebox pada blog Anda. Jika belum, buat widget Facebox Anda terlebih dahulu » Telusuri tentang cara membuat widget Facebox di blog

Preloader ini hanya berlaku untuk Facebox yang dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah yang berada pada tab Iframe:

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini lalu letakkan di atasnya:

/* Iframe Preloader */
.framePreloader iframe {
  background-color:white;
  border:none !important;  
  display:block;
  margin:0px auto;
}

Setelah itu temukan kode ini:

</body>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script type='text/javascript'>
//<![CDATA[
window.onload = function() {
    function createIframe(src, w, h, frID) {
        var i         = document.createElement("iframe");
        i.src         = src;
        i.scrolling   = "auto";
        i.frameborder = "0";
        i.width       = w;
        i.height      = h;
        document.getElementById(frID).appendChild(i);
    }

    // Definisikan dimensi, URL iframe dan tempat sasaran muat iframe di sini...
    createIframe("URL-Iframe", "Lebar Iframe", "Tinggi Iframe", "ID Kontainer");

}
//]]>
</script>

Klik Simpan Template. Sekarang kita masuk ke tahap pengaturan.

Pengaturan

Dalam iframe Facebox, Anda akan menemukan beberapa kode yang nantinya harus Anda masukkan ke dalam preloader. Berikut ini adalah sebuah contoh dari iframe Facebox yang akan Anda dapatkan saat Anda mengeklik tombol Get Code:

Kita akan mengambil nilai atribut src, ukuran lebar dan tinggi pada iframe tersebut saja, sementara sisanya bisa kita buang.

Tambahkan sebuah elemen halaman HTML/JavaScript (atau cukup gunakan formulir widget Facebox lama Anda). Di dalam formulirnya, letakkan kode ini:

<div class="framePreloader" id="framePreloader1"></div>

Kode di atas digunakan untuk memuat iframe Facebox Anda.
Simpan perubahan widget Anda.

Kembali pada fungsi yang telah kita letakkan di atas </body>, ubah variabel-variabelnya menjadi seperti ini:

createIframe("http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true", "292px", "290px", "framePreloader1");

Klik Simpan Template dan lihat hasilnya.

Catatan: Script ini tidak hanya berlaku untuk satu buah iframe saja. Anda bisa menggunakan satu fungsi ini untuk menunda proses muat beberapa iframe sekaligus. Pada intinya, yang terpenting adalah buat elemen-elemen kontainer yang akan kita gunakan sebagai wadah iframe seperti ini:

<div class="framePreloader" id="framePreloader1"></div>
<div class="framePreloader" id="framePreloader2"></div>
<div class="framePreloader" id="framePreloader3"></div>
<div class="framePreloader" id="framePreloader4"></div>

Setelah itu Anda bisa menggandakan fungsinya seperti ini:

createIframe("iframe1.html", "250px", "300px", "framePreloader1");
createIframe("iframe2.html", "250px", "300px", "framePreloader2");
createIframe("iframe3.html", "250px", "300px", "framePreloader3");
createIframe("iframe4.html", "250px", "300px", "framePreloader4");