Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

Ahmad Fawzan Rohman Rabu, Agustus 01, 2012

Cara Membuat Komentar Facebook Dan Blog Berdampingan, pada postingan kali ini saya share Mengenai kotak komentar blog dan facebook. kotak komentar ini berdampingan terdiri active tab dan inactive tab, active tab pada bagian kotak komentar facebook dan inactive tab pada kotak komentar blog tidak terbuka dua duannya, untuk demonya bisa lihat kotak komentar paling bawah postingan ini. dan inilah screenshotnya.

Sebelum mencobanya anda harus setting dulu kotak komentar blog agar tampil dibawah postingan. klik setelan/setting >> komentar kemudian pilih tampilkan 

dan pilih komentar tampil dibawah entri.

sudah berhasil ? kembali ke dashbord dan klik rancangan dan kemudian klik edit HTML, backup dulu template anda untuk jaga-jaga, centang expand widget dan cari kode ]]></b:skin>, untuk memudahkan pencarian tekan CTRL F dan ketikkan kode ]]></b:skin>, uda ketemu ? copas kode dibawah ini diatas kode ]]></b:skin>

.comments-page { }
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { color:#FFF;text-shadow: 0 0 6px darkgrey;background-image: url(http://i1106.photobucket.com/albums/h367/Nando_DeltaCyber/star.gif); }
.inactive-select-tab {}

Selanjutnya cari kode </head> seperti cara diatas, kemudian copas kode dibawah ini diatas kode </head>

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<meta content='NAMA BLOG KAMU' property='og:site_name'/>
<meta content='166134373479622' property='fb:app_id'/>
<meta content='ID FB ANDA' property='fb:admins'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>

Sesuaikan kode yang berwarna biru diatas tuliskan nama web anda ( contoh : NXNX MJ's Blog ) dan ID FB anda ( contoh : fauzan.zifa ).

Lanjut yang terakhir cari kode <div class='comments' id='comments'> dan copas kode dibawah ini tepat di bawah kode <div class='comments' id='comments'>, jika kode <div class='comments' id='comments'> ada dua letakkan pada kode <div class='comments' id='comments'> yang ke dua

<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='https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico'/>
<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://i997.photobucket.com/albums/af96/fauzan_zifa/1.png'/> <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='2' width='580'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Kode yang berwarna diatas, 2 = jumlah komentar FB yang akan ditampilkan, 580 = ukuran dari kotak komentar, sesuaikan dengan blog anda. dan simpan template anda.

semoga berhasil..... jangan lupa komentarnya ya...