Membuat Comment Blogger Ala Facebook

Well, Spayser's (Pengunjung blog spays corp), 

Kali ini, saya mau membagikan tips tentang pembuatan comment ala facebook pada blog (blogspot) kita masing-masing. Tips ini saya sadur dari http://www.seowaps.com/2013/06/cara-membuat-kotak-komentar-facebook-di.html. Karena tipsnya sangat bermanfaat bagi saya, jadi saya putuskan untuk menulis ulang tips tersebut. Siapa tau, sobat sekalian berkenan dengan tips ini.

Well, Spayser's......

1. Masuk ke akun blogger kita masing-masing.

2. Buka pengaturan templates dengan cara pilih Tempate, edit HTML.

3. Untuk berjaga-jaga, copy coding xml yang muncul dan pasterkan di notepad or notepad ++.

4. Lalu Find (CTRL +F) dan cari:  ]]></b:skin>

5. Letakkan coding di bawah ini tepat di atas  code ]]></b:skin>

.comments-page { background-color: #00BFFF;}

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

6. Cari lagi kode </head> kemudian letakkan kembali kode di bawah ini tepat di atas 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 FB Anda' 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>

Sampai pada tahap ini, buka facebook anda, sobat Spayser's. Lalu buka profil anda. Kemudian perhatikan pada bagian atas browser anda, biasanya tertulis seperti contoh ini:

https://www.facebook.com/nama.anda (ket: id fb sobat Spayser's adalah nama.anda)

Well, selanjutnya ganti tulisan ID FB Anda pada <meta content='ID FB Anda' property='fb:admins'/> dengan id anda yang terdapat pada fb (lihat contoh di atas). Sehingga hasilnya:

<meta content='nama.anda' property='fb:admins'/>

7. Sobat Spayser's, karena kita membuat komentar fb ini berdampingan dengan komentar blogger, so kita mesti nambah beberapa script lagi. Cari kode <div class='comments' id='comments'> . Biasanya di dalam kode xml blog anda, tidak hanya ada 1 kode tersebut. Jadi, carilah kode yang paling terakhir dan kemudian letakkan script di bawah ini tepat di bawah kode <div class='comments' id='comments'>. Scriptnya yaitu:

<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='5' width='500'/>

    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by

<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>

</div>

    </b:if>

    </div>

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

Selesai sudah kita mengedit coding xml blogger kita. Sekarang, tinggal copykan saja hasil editan xml kita pada template blogger (bagian edit HTML) dan SIMPAN. 

L..............................o............a.......................d............................i..............n............................g

Jika hasilnya tidak Berhasil, jangan kecewa.

Silahkan ganti bagian yang ada <html dengan:

<html xmlns:fb='http://www.facebook.com/2008/fbml'>

Dijamin bisa......

Semoga Sukses agan Spayser's.

loading...

Tweet