Search This Blog

Sunday, December 24, 2017

Memasang Widget Facebook Like Page Terbaru di Blog

facebook page plugin
Facebook Page Plugin

Banyak Blogger bertanya soal error atau trouble memasang widget Facebook Like Page yang terbaru versinya, bernama Facebook Page Plugin, untuk format blog di blogger.com (blogspot.com), karena berubahnya coding yang disediakan oleh Facebook Developers (developers.facebook.com), yang diforum-forum lokal/internasional belum ditemukan solusinya yang manjur, akhirnya saya tertarik untuk melakukan investigasi sendiri, dan memang khususnya format blogspot, pihak Facebook belum memberikan solusi jitu untuk itu!

Tapi untuk investigasi dalam format website non-blog, saya belum coba - lagipula persoalan yang diangkat dalam materi ini untuk format blogspot. Saya pribadi jadi penasaran kenapa bisa begitu, apanya yang salah, dan sebagainya.

To the point..! Disini tidak akan dibahas bagaimana cara mendapat coding script untuk Like Page dimaksud, karena jika blogger mengalami kesulitan untuk pasang widget tsb di blog-nya, diasumsikan sudah tahu cara memperoleh coding Facebook-nya.
facebook page plugin code
Gambar diatas adalah script yang diberikan oleh Facebook Developers (dari Page-nya mereka sendiri) yang nantinya disesuaikan lagi dengan blogger masing-masing. Ikuti step-by-step caranya dengan referensi dari gambar tsb:

Step-1: Copy dulu struktur script no. 2 (box konten yang "Place the code... bla bla"), lalu Paste ke pilihan widget blogger (Add Gadget di Layout / Tata Letak), selesai Save.

Step-2: Copy isi struktur script yang no. 1 (box konten "Include the JavaScript SDK... bla bla").

facebook plugin pasang di blogger
Step-3: Akses bagian Template blogspot, lalu Edit HTML.

Step-4: Paste struktur script yang tadi dicopy (struktur no. 2), pada baris sebelum atau di atasnya  </body>

Step-5: Nah, pasti muncul notifikasi error (tulisan warna merah) dari sistem blogspotnya! (notif pada bagian paling atas jendela penulisan script).

Lalu, letak kesalahannya dimana???

Disini... :
facebook plugin page code check
Step-6: Copy script yang BENAR buatan saya berikut ini (ganti yang error). Script-nya ada di bagian bawah.

Step-7: Ya, Paste script yang sudah dimodif saya ke posisi baris Template blogspot yang lagi dibuka. Atau sesuaikan saja dengan mengganti pas letak kekeliruannya.

Step-8: Ya, Save lah alias Simpan template-nya...

Step-9: Seharusnya sudah tidak ada lagi notifikasi error dari sistem (seperti yang sudah dipraktekkan sendiri).

Step-10: Tes alias diuji dengan klik View Blog (Lihat Blog).

Step-11: OK kan? Tinggal seduh kopi, sediain snack... "If I just knew it was a piece of cake, all I gotta do is just eat that cake... LOL"

Berikut ini script yang saya sebut untuk dicopy:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

*Catatan Kaki:
  1. Jadi kekurangan/kekeliruannya: value 1 menyebutkan file xml ala FB Developers (xfbml) yang dipanggil, lalu disertai keterangan tipe versinya, tapi lupa bahwa cantuman dan harus diikuti oleh amp (symbol dan pada coding termasuk HTML) sehingga harusnya &amp lalu diikuti dengan keterangan versi harus diberikan pembatas berupa tanda ; (semicolon alias titik-koma) barulah input versionnya.
  2. Jadi seharusnya ~ xfbml=1&amp;version=v2.3"; ~ sementara script dari FB Developers: ~ xfbml=1&version=v2.3"; ~
Kelihatan sepele dan cuma segitu ya? Tapi dalam urusan coding, it does matter! Ya, sesuai pengalaman saya berkutat dengan Bahasa atau script program.

Jadi, kekurangannya adalah karakter code amp dan ; (semicolon atau titik-koma)

*PS: yet somehow those scripts just worked fine on standard webs (non blogging platform).