Cara Pasang atau Membuat Komentar Facebook dan Blog Berdampingan

Cara Membuat Kotak Komentar Facebook Berdampingan dengan Kotak Komentar Blog, selamat siang Sobat , kembali saya bagikan tips seputar blogger. Sesuai dengan judul diatas, sobat bias melihat langsung di bawah kotak komentar blogku ini(jangan lupa kasi komentarnya ya!!). Dibawah terdapat dua  kotak komentar yang berbeda, satunya komentar
facebook dan satunya lagi komentar milik blogger sendiri.Sobat bisa pasang kok kotak komentar facebook di blog sobat tanpa menghilangkan kotak komentar bawaan blog. Biar nggak bingung nih saya kasih screenshotnya :

Bagaimana ?? sobat tertarik ?? langsung praktek aja ya. Caranya mudah, sederhana, dan cepat.

Oh ya Sobat , terlebih dahulu Backup Templatenya dahulu, hal ini bertujuan kalo nantinya script/kode dibawah ini tidak berjalan!!

Login ke akun blogger sobat >>masuk ke menu Template/Rancangan>>pilih Edit HTML >>Proceed >> Expand Widget Templates.

1. Cari kode berikut ''<div class='comments' id='comments'>''.

kode ini biasanya ada 2. sobat pilih yang ke-2 dan copy paste kode dibawah ini tepat di bawah kode ke-2.

<div

 class='comments-tab' id='fb-comments'

onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>

<div id='fb-root'/>

<fb:comments expr:href='data:post.url' num_posts='3' width='400'/>

</b:if>

</div>

<div class='comments comments-page' id='blogger-comments-page

Code num_posts='3' width='400' sobat rubah sesuai kehendak sobat. 3=jumlah komentar facebook yg akan tampil, 400=lebar kotak komentar.( Sebenarnya tidak dirubah juga udah bagus kok.)

2.Cari kode  </head>  dan letakan kode dibawah ini tepat diatas kode  </head>

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content='ID Facebook'property='fb:admins'/>

<script type='text/javascript'>

function commentToggle(selectTab) {

$(".comments-tab").addClass("inactive-select-tab");

$(selectTab).removeClass("inactive-select-tab");

$(".comments-page").hide();

$(selectTab + "-page").show();

}

</script>

ID Facebook: Ganti dengan ID Facebook sobat yang terletak di bagian belakang browser URL Profil Facebook sobat, Misalkan http://www.facebook.com/gambarcrew ID Facebooknya adalah gambarcrew .

3.Cari kode berikut  /* Comment atau #commentsatau /* Comments----------------------------------------------- */  berhubung setiap template berbeda-beda, kalo sobat tidak menemukan ketiga code tersebut di blog sobat. sobat cari saja yang mirip dengan code tersebut. Pokoknya kode yg mengatur komentar. kemudian copy paste kode dibawah ini tepat dibawah kode tadi.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

.comments-page { background-color: #f2f2f2;}

#blogger-comments-page { padding: 0px 5px; display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}

SIMPAN DAN SELESAI
Catatan: mungkin sebagian dari sobat ada yang bertanya, kenapa kok ngga tampil secara sempurna di blog sobat ? Jawabannya : perhatikan cara pemasangan script/kodenya. Perhatikan secara teliti dan hati-hati biar kodenya dapat berfungsi secara maksimal. Sobat , saat saya pertama kali membaca artikel seperti di atas saya langsung mempraktekanya dan BERHASIL seperti kolom komentar di bawah ini. Jadi apasalahnya saya bagikan tips ini ke Sobat semuanya.

Oh ya Sobat, klo ada kesulitan dalam menerapkan artikel ini Sobat bisa komentar di bawah ini. Menurut Anda bagaimana?Gampang bukan atau sulit ??

Thanks to :

-          Jesus Christ

-          My family (my parents,my sister and my brother)

-          And all my frends in SMK N 2 Kupang Teknik Gambar Bangunan 1 ( Semoga tahun ini kita LULUS semua)

-          Yang terakhir buat Sobat yang udah mau baca-baca dan kasi komentarnya di artikel ini. J :) .

Sumber :