Menambahkan plugins komentar facebook di posting blogger

Diantara sekian banyak pengunjung yang datang dan ingin berkomentar di blog kita sangat mungkin diantara mereka ada yang tidak memiliki Open ID. Tentu saja kita bisa memperbolehkan 'anonymous' akan tetapi cara ini sering mengundang spam. Sebagai alternatif kita bisa memasang kolom komentar untuk akun facebook, selain bisa lebih memfilter spam juga bisa lebih mempercantik tampilan blog kita.

Ada beberapa langkah yang bisa kita lakukan untuk menambahkan plugins komentar menggunakan akun facebook kita di postingan blogger, sebagian dari cara-cara tersebut malah membuat blog kita jadi tidak enak dipandang sebab posisinya tidak proporsional. Misalnya, kolom komentar plugins facebook tersebut berada di bawah kolom komentar blogger, praktis jadi ada 2 kolom komentar kosong yang terlihat di bawah postingan kita. Kasus seperti sebetulnya karena penempatan HTML nya saja yang kurang pas. Contoh yang saya gunakan adalah seperti ini :


Dibawah ini langkah-langkah membuatnya :

A. SETTING DI FACEBOOK :
Ketahui terlebih dahulu FACEBOOK_USER_ID dan APPLICATION_ID sobat di facebook, caranya :
1. FACEBOOK_USER_ID bisa dilihat di URL https://graph.facebook.com/usernameFBSobat
2. Untuk APPLICATION_ID sobat harus buat dulu aplikasinya di facebook, caranya :
  • Masuk ke sini.
  • Register as Developer >> Centang Box "I accept the dst....." Lanjutkan >> Dibawah "Which types of apps do you plan on building?" Centang Box "Aplikasi untuk halaman" klik Lanjutkan >> Done.
  • Buat Aplikasi Baru, isi data kurang lebih seperti ini :
  • Nama Aplikasi : Plugins Komentar Nama Anda
  • App Name Space : namaandadisatukanaja
  • App Category pilih : Aplikasi untuk halaman
  • Lanjutkan >> jika ada capcay isi saja >> lanjutkan.
  • Catat App ID sobat yang diberikan disana terlebih dahulu, lalu klik simpan perubahan :

Nah, sekarang sobat sudah mengetahui FACEBOOK_USER_ID dan APPLICATION_ID masing-masing.

B. SETTING DI BLOGGER.
Langsung saja langkahnya sebagai berikut, masuk ke Blogger >> Template >> Edit HTML dan masukkan kode-kode di bawah ini :
1. Meta Tag
Copykan kode ini di atas <b:skin><![CDATA[
<meta property="fb:admins" content="{FACEBOOK_USER_ID}"/>
<meta property="fb:app_id" content="{APPLICATION_ID}"/>
2. CSS
Tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
/* komentar facebook */
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
 3. Javascript
Letakkan kode di bawah ini tepat di atas kode </head>
<!--script komentar facebook start -->
<script src='http://connect.facebook.net/id_ID/all.js#xfbml=1&amp;appId=APPLICATION_ID'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='FACEBOOK_USER_ID' property='fb:admins'/>
<script type='text/javascript'> function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}</script>
<!--script komentar facebook end -->
4. HTML :
Cari kode:
<div class='comments' id='comments'>
Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika sobat ingin agar plugin itu tampil di setiap halaman silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.
<!-- HMTL komentar facebook start -->
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='4' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!--HTML komentar facebook end -->
Catatan :
  • Nilai 500 di atas adalah lebar kolom komentar yang bisa sobat sesuaikan sendiri berdasarkan kebutuhan.
  • Ganti semua tulisan FACEBOOK_USER_ID dan APPLICATION_ID dengan User & App ID sobat sendiri.
  • Preview terlebih dahulu lalu save.
Sekarang di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan akun facebook mereka. Sedangkan sobat sendiri akan melihat Link "Pandangan Moderator" dan icon pengaturan komentar seperti pada contoh gambar blog saya di atas. Sebagai Moderator, sobat juga bisa mengatur komentar para facebooker di blog disini.
Regards.

19 komentar :

  1. setelah saya coba pasang scriptnya.tdk muncul tulisan komentar FB di blog saya.thanks

    BalasHapus
    Balasan
    1. flatform blog-nya apa gan? tips di atas cuma buat blogger. Atau coba pake template baru (dinamis). Maaf kalo jawabannya kurang sempurna, ane juga masih belajar gan.

      Hapus
  2. gan makasih udah saya praktek in di blog saya
    www.ione13.blogspot.com
    saya cuman naruh script HTML ( No. 2 ) cuman 1 kali aja di
    div class='comments' id='comments yang ke 2 (total ada 2 )
    tapi tetep jalan kok

    pertanyaannya, saya UPDATE posting blog pake dlvr.it
    dan commentnya ngga saling terhubung antara blogger dab FB
    saya komen di blogger ngga muncul di FB
    ada yang komen di FB ngga muncul di blogger

    emang cara kerjanya cuman memperbolehkan yang ngga punya akun blog ato WP, TAPI memiliki akun FB aktif login bisa ikut komen?
    atau seharusnya komen blog dan FB sinkron?

    mohon pencerahannya :D

    BalasHapus
    Balasan
    1. harus dipasang step yg no 3 nya gan soalnya itu script biar bisa konek sama akun fb yg bersangkutan. soal step yg no 1 cuma buat ngatur tampilan aja, bisa gak dipake kok kalo udah terpasang CSS yg sama di blog agan.

      Hapus
  3. Thanks ya sangat membantu dan mudah.

    BalasHapus
  4. gan tolong dong kenapa ini kok komentar nya yang keluar cuman satu yang facebook tidak keluar, mohon pencerahaan nya .. cek tkp saya gan trimakasih http://lintas-tulisan.blogspot.com

    BalasHapus
    Balasan
    1. udah ane liat barusan, kayaknya work tuh :D

      Hapus
  5. Thanks tipsnya. Sudah berhasil gan

    BalasHapus
  6. thanks gan infonya membantu, gw dah coba pasang trnyata brhasil. yeeee.... salam kenal gw pndatang baru di di dunia blog. mga bsa sering lbh bnyak kdepannya. thanks a lot.

    BalasHapus
  7. Tutorialnya sangat membantu saya menambahkan kolom komentar bagi facebook user. Menurut saya Artikel mas kerah ledrek ini sangat mudah untuk diikuti.
    Saya pun memasang pada blog saya, tentu dengan sedikit modifikasi agar sesuai dengan warna & bentuk template.

    Akhir kata, saya mengucapkan terima kasih sekali lagi untuk mas kerah ledrek karena sudah berbagi.
    ^_^

    BalasHapus
  8. Thanks infonya. Udah tak coba tapi kok ada kata2 "you are not login"? Jadinya gak masuk gitu koment saya gan...

    BalasHapus
  9. yuk share pin bb kalian di sini :

    http://share-pinbb.blogspot.com/

    saatnya menambah banyak teman se indonesia

    BalasHapus

Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.