Ad 468 X 60

Senin, Mei 20, 2013

Cara Menggabungkan Komentar Facebook dan Komentar Blogger

Bagi yang tertarik ingin mencobanya, silahkan dibaca, dan sangat berharap tutorial ini sedikit berguna,, simple saja jangan buu buru.. langsung saja mari kita Let's do it :
Masuk blogger - Pilih Template - Klik Edit HTML - cari Code Berikut Ini :

<div class='comments' id='comments'>
Apabila terdapat 2, maka pilih saja yang pertama. Kemudian Copy Code dibawah ini dan paste dibawah code diatas :
<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
 Catatan :
- width='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
- Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
<div class="comments-page" id="fb-comments-page">
dengan kode: <div class="comments-page" id="fb-comments-page" style="max-height: 230px; overflow: auto;">
Tetapi jika tidak ingin menambah scroll, silahkan di abaikan saja.
Selanjutnya cari kode: </head> lalu letakkan kode dibawah ini tepat diatasnya.
<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' 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>
Note : Ganti  ID FB dengan ID facebook sobat.. contoh ID Fb https://www.facebook.com/ian.azhari.5 yang berwarna merah itu adalah ID sobat..
Kemudian cari Code Berikut /* Comment atau kode: #comments, kalau saya sendiri mempunyai banyak code #comments, bagi yang template-nya berbeda biasanya identik dengan comment bisa ID atau class.. okeh apabila sudah ketemu letakan code dibawah ini tepat dibawahnya :
.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;}
 untuk mengantisipasi eror, karena tampilan blog sekarang berlaku untuk Cache jadi selama blog sobat belum ditutup jadi masih bisa di Undo : Ctrl+Z..
simpan dan pastikan tidak salah..
 


Get Free Email Updates Daily!

11 komentar:

  1. Kunjungan Balik Sob ^^

    BalasHapus
  2. bagus nih sob,
    bermanfaat banget :)
    kunjungan baliknya ya

    www.mas-edward.blogspot.com

    BalasHapus
  3. saya udah bisa gabungin komentar fb dgn blog nya, tapi kok kalu pengunjung komenter via blog kok komentar fbnya gak muncul? mohon pencerahan nya.

    BalasHapus
  4. Bagus Banget Nih Mantaabbb KUnjungi Juga http://fery-antojawa.blogspot.com

    BalasHapus
  5. apakah komentar di blog juga muncul di fb....

    BalasHapus
  6. Gimana gan, komentar blognya hilang kalo ada orang yang comment menggunakan kolom komentar facebook. ada solusinya nggak?

    BalasHapus
  7. kunjungan baliknya gan
    https://argopurojatim.blogspot.co.id

    BalasHapus
  8. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  9. mantap gan ilmunya thx

    BalasHapus