Exclusive: Cara Lengkap Membuat Kotak Komentar Facebook Versi Baru di Blog (New Facebook Comments Box: Full Guide)

Daftar Isi

Klo anda pernah inget dan sempet nyimak salah satu postingan saya yang terdahulu (postingan 1 tahun yang lalu klo gak salah), sebenernya disitu saya udah secara jelas menerangkan cara pembuatan Kotak Komentar Facebook versi terdahulu dengan beberapa kali update yang saya sertakan sebagai bukti bahwa tutorial itu dapat bekerja dengan baik disemua blog, bahkan dengan parameter yang baru ataupun yang lama *karena ada beberapa komentator yang mengeluhkan bahwa dirinya selalu mendapati pesan error saat mengikuti postingan saya yang terdahulu itu, biarpun disisi lain banyak yang mengatakan bahwa mereka berhasil mengikuti tutorial tersebut dan bahkan masih memasangnya di blog mereka sampai hari ini hha... Nah sebagai kelanjutan dari postingan tersebut, kali ini, secara exclusive saya akan menerangkan cara pembuatan Kotak Komentar Facebook versi baru alias New Facebook Comments Box jika dilafalkan dalam bahasa british *Halah gayamu kang haha... Dan biarpun mungkin anda akan menemukan ribuan result postingan yang menawarkan cara pembuatan Kotak Komentar Facebook, saat anda mengetikkan keyword tersebut di Search Engine besar, semisal Google ataupun Bing *Catatan: karena Yahoo udah diakuisisi sama Microsoft jadi gak ikut saya sebut bisa saya pastikan bahwa postingan-postingan yang akan anda temui tersebut hanya akan menjelaskan cara pembuatan Kotak Komentar Facebook versi terdahulu atau versi jadul yang kebetulan masih saya pertahankan untuk blog ini *GUBRAK!!! Kenapa? karena bahkan di Forum-forum luar sana, masih banyak blogger dan webmaster yang memperdebatkan kinerja Kotak Komentar Facebook yang baru ini dan mengatakan bahwa kotak komentar Facebook versi baru ini tidak dapat bekerja di blog mereka, so wajar klo akhirnya jarang blogger luar yang mau nulis postingan cara pembuatannya, yang ujung-ujungnya membuat blog-blog tutorial di Indonesia ikut ketinggalan satu langkah karena blog-blog luar yang selama ini mereka jadikan acuan tidak menuliskannya. Padahal klo saya pikir-pikir lagi, ngapain juga gitu Developer facebook segala bikin kotak komentar versi baru mereka, klo ujung-ujungnya gak bisa dipake dan digunakan... Iya gak? jadi klo menurut pendapat ngawur saya sih, Kotak Komentar facebook yang baru ini pun seharusnya bisa digunakan oleh semua blog dengan platform apapun, termasuk Blogger (Blogspot). Dan klo ujung-ujungnya ada yang gak bisa masang, itu bukan karena kesalahan dari Developer ataupun si pembuat tutorial, tapi murni karena faktor perbedaan-perbedaan kecil di beberapa template yang akhirnya membuat Kotak Komentar facebook versi baru ini tidak muncul *bukan tidak bekerja yang seharusnya bisa diakalin dengan beberapa perubahan letak Script hhe... Itu kenapa akhirnya saya memutuskan untuk menuliskan postingan ini bagi anda, karena setelah saya coba dan saya modifikasi dikit untuk salah satu blog saya, Kotak Komentar facebook versi baru ini pun ternyata dapat bekerja dengan baik :) dan karena kata orang bijak ilmu itu harus selalu dibagikan agar bertambah banyak, so karena saya juga gak pernah mengacu pada blog manapun, jadi secara exclusive akan saya jelaskan step by step nya untuk anda. But, ada beberapa catatan yang ingin saya sebutkan diawal sebelum anda mengikuti tutorial kali ini, yaitu:

1. Jika saat ini anda sudah memasang Kotak Komentar Facebook versi terdahulu alias jadul version, saya sarankan agar anda menunggu postingan saya yang selanjutnya tentang cara meng- upgradenya, karena saya gak bertanggung jawab sama sekali untuk semua pesan error yang mungkin akan anda temui jika anda berminat mengikuti tutorial ini, tanpa atau dengan mengganti Script Kotak Komentar Facebook yang lama yang sudah terpasang di blog anda. 2. Saya beritahukan, bahwa jika anda tetap ingin langsung mengikuti tutorial ini tanpa menunggu postingan upgrade saya yang selanjutnya, resiko yang akan anda hadapi adalah kehilangan semua komentar yang telah masuk ke blog anda, jadi pikirkan matang-matang sebelum anda mengikuti tutorial saya kali ini, karena lagi-lagi saya gak bertanggung jawab atas akibatnya :) 3. Untuk anda yang tidak pernah berhasil memasang Kotak Komentar Facebook versi terdahulu alias Jadul Version, bisa saya katakan bahwa Kotak Komentar Facebook versi baru yang telah saya modifikasi dikit dalam tata letaknya ini, bisa menjadi salah satu jawabannya, karena setelah saya pasang di beberapa blog yang memiliki perbedaan kode, ternyata kotak komentar versi baru ini lebih friendly dan jarang skak alias error hhe... :) 4. Untuk anda yang masih ragu atau setengah yakin untuk mengikuti tutorial kali ini, saya sarankan agar anda melakukan Back up template terlebih dahulu, agar jika salah, anda dapat mengembalikan tampilan blog anda sebelumnya.

Lantas apa fitur baru yang dapat anda nikmati di versi terbarunya ini:

1. Threaded comments yaitu anda dapat melakukan reply atau membalas komentar lain yang sudah lebih dulu masuk. 2. User network yaitu fitur yang akan membantu penulis blog mengetahui keterangan dari para komentator mereka, karena di versi anyarnya Kotak Komentar facebook tidak hanya akan menayangkan nama komentator melainkan juga deskripsi, profil atau pun Informasi singkat mereka. 3. Permalink to specific comments yaitu anda dapat membagikan link tertentu yang hanya akan diarahkan pada komentar tertentu yang ingin anda bagikan :) 4. Notifications, klo dulu-dulu kan susahnya masang beginian gak ada Notifikasinya ya? klo sekarang kebetulan udah ada haha... 5. 2 Color schemes, alias ada 2 pilihan warna yang nanti akan saya terangkan satu-persatu.

Dan sekarang saatnya kita masuk ke tutorial: Langkah Pertama Saya akan memberikan sebuah option, yaitu option pertama anda ingin memiliki 2 buah kotak komentar, yaitu Kotak komentar blog dan kotak komentar Facebook secara bersamaan, atau hanya ingin memiliki kotak komentar facebook saja dan ingin menonaktifkan kotak komentar blog anda? jika anda memilih option pertama, silahkan lanjut ke Langkah selanjutnya tanpa harus mengikuti membaca lebih jauh langkah pertama ini, tapi jika anda memilih option kedua, silahkan non-aktifkan dulu kotak komentar blog anda dengan cara: Masuk ke Settings atau Setelan, Pilih comments atau Komentar dan pada field comments atau komentar pilih Hide atau sembunyikan dan save atau simpan perubahan tersebut. Langkah Kedua Sebelum melakukan proses pemasangan, terlebih dahulu kita harus meng-generate Facebook App ID dengan menggunakan akun Facebook kita masing-masing, dan berikut caranya: Silahkan Login ke akun facebook anda, dan masuk ke page facebook developers. Dan jika anda sudah lama tidak pernah menggunakan akun Facebook seperti halnya saya yang sudah migrasi total ke Google+ haha... terlebih dahulu anda harus melakukan verifikasi akun seperti berikut: Klo udah lama gak buka-buka Facebook, biasanya setelah membuka link yang menuju ke page facebook developers tersebut anda akan menemukan tampilan seperti ini: Silahkan Klik gambar untuk memperbesar ukurannya, klo udah keliatan disitu kan ada 2 link tuh ponsel atau kartu kredit, nah pilih yang ponsel biar lebih gampang, kemudian anda akan dihadapkan pada pop-up berikut: Nah isi Field Nomor telepon dengan Nomor Handphone anda, tapi inget, karena diatas Field nomor telepon udah ada Field kode negara yaitu +62 untuk Indonesia, jadi jangan tulis angka 0 yang dipaling depan jadi klo misal nomor Hp anda adalah 0857.... tulisnya mulai dari 857 aja 0-nya mah gak usah, klo udah klik Konfirmasi, dan anda akan dibawa ke pada penampakan berikut: Yang artinya akun anda sudah terverifikasi, dan secara otomatis anda akan dibawa pada page berikut: Isi Nama situs dengan: Judul blog anda Isi Url situd dengan: url atau alamat blog anda Isi Lokale dengan: Bahasa Indonesia Selanjutnya klik Buat Aplikasi, dan anda akan dibawa ke Page berikut ini: Karena kebetulan saya pernah bikin 2 aplikasi facebook untuk blog ini, jadi saya langsung dibawa ke penampakan kaya gitu, tapi klo sebelumnya anda gak pernah bikin aplikasi apapun, bisa saya pastikan tampilannya akan bersih :), selanjutnya klik +Create New App atau klo gak ada kata-kata itu cari kata +Set Up New Applications, maka akan terbuka pop-up berikut ini: Isi App Display Name sesuka hati anda dan kosongkan field App Namespace, kemudian centang kata-kata I Agree to the facebook platform Policies. dan klik Lanjutkan kemudian anda akan dibawa ke tampilan bnerikut: Isi Capthanya dan klik Kirim, maka anda akan langsung diberikan App ID, yang penampakannya kaya dibawah ini: Maaf saya tutupin hhe... pokoknya biarin dulu page itu terbuka dan jangan diapa-apain karena kita masih butuh sama App ID-nya atau silahkan Copy dulu semua keterangan yang berhubungan dengan App ID dan lainnya kedalam notepad Langkah Ketiga Sejenak kita tinggalkan dulu Langkah kedua diatas, dan kita mulai dengan pemasangan kotak komentar facebook versi baru ini kedalam blog kita, dan caranya adalah: 1. Login ke Akun Blogger anda masing-masing 2. Klik Design atau Rancangan, kemudian pilih edit html 3. Centang Expand Widget Template (saya anjurkan download dahulu template anda) 4. Kemudian cari kode berikut ini:

<html

pokoknya letaknya dibagian atas lah, klo udah ketemu tambahkan Kode berikut ini:

xmlns:fb='http://www.facebook.com/2008/fbml'

setelah kode <html tersebut, letaknya terserah anda bisa setelahnya, bisa di baris kedua atau bisa juga dibaris ketiga, contohnya gini: Sebelum dimasukkin kode itu kan template kita bentuknya kaya gini ya:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Nah anda bisa nambahin kodenya menjadi

<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >

Perhatikan gambar dibawah ini: Intinya didalem tag buka html aja, terserah juga sih klo anda mau nambahinnya setelah parameter xmlns pertama, kedua, atau bahkan terakir hhe... atur aja deh sesuka hati anda :) 5. Kita akan menambahkan SDK aplikasi ini kedalam template blog kita, kenapa pake SDK? karena ini berbentuk aplikasi, jadi layaknya menggunakan Aplikasi Programming semisal Jcreator, Netbeans atau Eclipse, kita pun membutuhkan SDK :) Untuk itu silahkan cari kode <body> Dan masukkin script SDK dibawah ini setelah kode tersebut:

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'APP ID ANDA', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

Tadi kan saya suruh diemin dulu atau di copy ke Notepad tuh App ID dan temen-temennya, sekarang masukkin APP ID atau Applications ID untuk menggantikan tulisan APP ID ANDA yang saya beri warna merah. 6. Kita akan menambahkan tag di template kita, caranya cari kode title blog anda yang bentuknya kaya gini:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

pokoknya diawal-awal Script template anda lah. Kemudian tambahkan tag dibawah ini persis dibawah title anda atau setelahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='MY-SITE-NAME' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='YOUR-APP-ID' property='fb:app_id'/> <meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/> <meta content='article' property='og:type'/>

Klo udah ganti semua keterangan yang saya kasih warna merah sesuai dengan keterangan milik anda masing-masing, MY-SITE-NAME bisa anda ganti dengan judul blog anda, YOUR-APP-ID bisa anda ganti dengan Applications ID anda di Langkah kedua tadi, dan YOUR-FACEBOOK-PROFILE-ID bisa anda ganti dengan ID Profil anda masing-masing, Oiya klo mau anda juga bisa menambahkan script diatas sebelum kode </head> hhe... tapi saran saya sih setelah title aja :) 7. Kita akan langsung memasukkan Script kotak komentarnya, dengan cara cari kode berikut:

<data:post.body/>

Atau

<p><data:post.body/></p>

Klo udah ketemu Copy Script dibawah ini tepat dibawahnya atau setelahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div> <div style='background-color: #000;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='' width='16'/> <b><a href='http://dj-note.blogspot.com' target='_blank' title='DJ Note'>Comments for blogger!</a> brought to you by DJ Note , Ingin Kotak Komentar seperti ini? <a href='http://dj-note.blogspot.com/2012/01/exclusive-cara-lengkap-membuat-kotak.html' target='_blank' title='DJ Note'> KLIK DISINI!?</a></b></div> </b:if>

Tadi kan diawal saya bilang tuh klo kelebihan kotak komentar facebook versi baru ini ada 2 pilihan warna, nah kode diatas untuk warna gelap dan klo mau yang terang silahkan hapus kode yang saya kasih warna merah: colorscheme='dark' dan untuk ukuran silahkan sesuaikan dengan lebar postingan anda masing-masing :) 8. Jika, semua langkah diatas sudah anda ikuti dengan benar, Save Template anda dan lihat hasilnya, klo bener, anda akan mendapati tampilan seperti ini: Untuk Demonya anda bisa liat di link berikut:

DEMO

Setelah masuk ke link demo, buka salah satu postingan dan tunggu loadingnya sampe tuntas :) Dan sekarang saatnya saya serahkan semua pilihan kedalam tangan anda, dan untuk yang ingin mencoba, saya ucapkan selamat mencoba Good Luck :) dan sampe ketemu dipostingan selanjutnya yang InsyaAllah akan saya jelaskan cara Upgradenya ...