Cara Membuat Komentar Blog Berdampingan Dengan Komentar versi Facebook

Posted by Azis Grafis on 2/20/12

Komentar facebook dan blog berdampingan? maksudnya seperti apa? Nah, biar teman teman ga bingung, bisa melihat contohnya pada gambar di bawah ini

Komentar Facebook dan Blogger yang Berdampingan
Nah, sudah tau kan maksudnya seperti apa? pada kotak komentar model ini, akan terdapat dua tab menu yang masing masing berisi kotak komentar dengan facebook dan kotak komentar default dari blogger. tertarik untuk membuatnya?


1. Masuk ke Edit HTML, kemudian beri centang pada expand widget template. Oh ya, jangan lupa di back up dulu templatenya yah .

2. Cari kode berikut <div class='comments' id='comments'>
3. Kode berikut di bawah kode di atas

<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

4. Cari kode </head> kemudian pastekan kode berikut di atasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukkan 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>

5. Kemudian cari kode berikut /* Comment atau #comments. Kemudian letakkan kode berikut di bawahnya

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

Keterangan :
  • Ganti kode warna biru denga jumlah coment yang ingin di tampilkan dan berapa ukuran lebar yang diinginkan
  • Ganti kode warna merah dengan id facebook teman teman, contoh alamat fb saya https://www.facebook.com/aziscs1 nah, id nya adalah aziscs1

Sumber : http://www.diditrinjano.com/

{ 6 comments... read them below or add one }

Ultrabook Notebook Tipis Harga Murah Terbaik said...

wow...informasi yang menarik. patut dicoba, thx for sharing

ZA-E BLOG Blogger On Blogspot said...

Sorry gan, ternyata ane telat ngasih tutornya,,

Gusnaedy Fadly 48 said...

Kunjungan malam hari

Jerry Kong said...

THANKS gan langsunganevobadan........ berhasil
kunjungi juga http://newsnesia.blogspot.com

wikibagus.com said...

Wah...aku jadi kayak nemu emas disini...thanks mas dah saya uji coba, tapi bingung caranya setting moderasi komentar FB, gmana caranya ya?

Trick Main Skateboarding said...

artikel menarik

Post a Comment