Blogger Tutorial

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

11.02,33 Comments


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:


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



hosting indonesia

You Might Also Like

33 komentar:

  1. aku juga pernah pake dulu Dj nand tapi jarang yang komentar jadi aku buka lagi

    BalasHapus
  2. wah ini blog baru mas Ferdinand yach??? keren abies blognya mas...

    BalasHapus
  3. assalamu'alaikum Kang
    suwi ra mlaku-mlaku, mules sama inet lemot. Lha mo komentar ke sini saja masuk ke klasik kudu klik 5 kali, makane nggak bisa liat tampilan contohnya. Wis yang penting podo seger waras nggih Kang

    BalasHapus
  4. sya juga pernah pake beginian, eh tapi kok balik ke home setiap di bawah readmore di tiap tulisan ada tampil kotak komentar facebooknya. pasti ada yang salah. boleh dah coba lagi buat kotak komentar di blog yang satuan

    BalasHapus
  5. Keren banget tutorialnya Sob, namun sepertinya banyak facebooker yang bukan pemain blog jarang mau meninggalkan jejaknya dalam memberikan komentnya. Seperti yang terpajang di rumah blog teman-teman yang lain. Thanks tuitorialnya.

    Sukses selalu
    Salam
    Ejawantah's Blog

    BalasHapus
  6. wuits harus tambah tag xmlns to? agak rumit juga pak,
    aku tadi nyengir waktu baca:
    ..anda harus melakukan verifikasi akun seperti berikut:
    Klo udah lama gak buka-buka Facebook.....

    *dirikupun begitu* . .entah berapa bulan sudah gak login, wong dot com ku saja lali seminggu gak takbuka wkwkwk
    makasih inpone, met zibuk zibuk

    BalasHapus
  7. thanks yaa meskipun lawas

    tapi sangat Bermanfaat

    BalasHapus
  8. Gan <body punya saya ...kok gak ada!

    BalasHapus
  9. nah ni ni Cara Lengkap Membuat Kotak Komentar Facebook Versi Baru di Blog yang benar benar paling lengkap dan mudah cara menggunakannya
    sobat memang paling mantab memilih tema. thank dah dishare..

    happy blogging

    BalasHapus
  10. @alkatro hahahaha mbah darmo katro ki jian pikun tenan.. (sori nyelak disini)

    BalasHapus
  11. Saya ingin bertanya, dengan kode yang baru ini kita akan mengetahui atau mendapat notifiasi atas semua komentar yang masuk??

    Saya dulu sudah pasang tp ga ada notifikasi, klo ada pesan. klo ini ada?

    BalasHapus
  12. Meskipun lawas tapi harus dicoba ... :)

    BalasHapus
  13. koment fesbuk saya agak susuah terbaca tulisannya diblog...
    Mohon pencerahan....

    BalasHapus
  14. thanks ya gan infonya...,,,langsung saya cobak di web saya,!?!?

    BalasHapus
  15. maturnuhun ya,, seneng banget 3 hari nyoba terus pake cara di blog laen gak da hasil nya, tapi disini langsung cap cus!!

    BalasHapus
  16. mantap sob tutor nya,kebetulan di blog ku udah aku pasang komen dr facebook jg

    BalasHapus
  17. @aneh tapi nyata


    iya gan ada notif nya ga gan,,, biar kita ngecheknya gampang klo ada yg komeng

    BalasHapus
  18. btw,, fitur resize fontnya nyebelin kang..

    ;/
    pas lagi klik klik malah gede2 sendiri,wkwk..
    btw,, yg beda apa ya ? theme darknya aj aya..

    BalasHapus
  19. kayaknya ada kode yang kurang soalnya dah aku coba tp selalu muncul pesan

    "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The reference to entity "quot" must end with the ';' delimiter."

    buat admin mohon diperbaiki, thanks sebelumnya :)

    BalasHapus
  20. berhasil kang...tp thema komentar ga sesuai dgn thema blog ane.
    yg putih2 aja kang gmn carax?

    BalasHapus
  21. Agak ribet ya......
    panjang banget!!!

    Ada yg lebih simpel g' ???

    maksud sy tinggal di copa skripnya????

    BalasHapus
  22. menarik...tapi ribet :D
    mm....gmn klo ckup pke kotak komentar bawaan blog ? lbh mudah deh kyknya ya.........

    BalasHapus
  23. Ribet tp gk ad slhnya di cb. Klo gk ad yg ksi komen, di lepas lg aj :D wkwk

    BalasHapus
  24. tuorialnya bermanfaat banagt gan,sukron

    BalasHapus
  25. koq gk berhasil sob.. bisa di cek gk sob disini http://thelikers.blogspot.com

    BalasHapus
  26. hahahahahhaha
    akhirnya bisa gannnnn
    makasih yah

    BalasHapus
  27. mas di blog saya gak data post body. gmana solusinya

    BalasHapus
  28. @ naufal blog : klo nggak ada <data:post.body/> coba cari <p><data:post.body/></p> dan sebaliknya... ditiap templat salah satu tag itu pasti ada kok :)

    BalasHapus
  29. coba ganti variasi ah pake kotak komentar facebook biar lebih beda...makasih atas tutorialnya sob...

    BalasHapus
  30. mas kalo yg ini kita bisa tau gk ntar org yang ngasi koment di artikel kita ??

    BalasHapus
  31. wah,, blognya sangat bermanfaat.

    BalasHapus