Cara Membuat Kotak Komentar FB dan Blog Berdampingan di Blogger

[ DEMO Bisa Di Lihat Di Kotak Komentar Blog Ini]


Cara Mendaftar dan Mendapatkan ID Aplikasi Facebook



  • Pertama-tama sobat harus punya ID aplikasi di Facebook. Kalau belum punya silahkan daftar dan buat dulu di Facebook Developers.
  • Dari halaman facebook developers, log in dulu kalau udah, sobat klik tab Apps di bagian atas. Lalu lSobat klik tombol Register as a Developers di kanan atas, lalu ikuti saja petunjuknya dan di isi data lengkap sobat termasuk nomer handphone buat verifikasi.


  • Sudah berhasil daftar, kalo udah lanjut sekarang buat aplikasinya agar dapat ID nya. Pilih + Create New App yang ada di kanan atas lalu akan muncul pop up, lalu tinggal di isi saja App Name sama App Namespacenya sesuai keinginan sobat kalau Web Hostingnya boleh dicentang atau dibiarin aja juga gak apa-apa. Kalau sudah tinggal klik Lanjutkan, beres.


  • Nah sekarang Sobat udah dapet ID aplikasi facebook. Untuk informasi umum dan yang lainnya silahkan di isi yang sesuai lalu simpan perubahan.




Cara Memasang Komentar Facebook Di Blog



  • Lanjut ke tahap pemasangan komentar facebook di blog gan. Pertama masuk ke Blogger lalu pilih Template kemudian Edit HTML dan centang Expand Widget Templates gan. Kita mulai dari atas biar gak bolak-balik.
  • Copy kode di bawah ini lalu pastein di bawah kode <head> atau selipkan di antara meta tag yang sudah ada di template kalian gan.



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


  • Tinggal di ganti aja Facebook Profile ID dan Aplikasi Facebook ID dengan ID punya kalian. Buat tau facebook profile ID bisa di cek di findmyfacebookid.com gan.
  • Sekarang cari kode ]]></b:skin> lalu copy dan paste kode CSS di bawah ini di atasnya gan.


     .comments-page{ background:#fff;}

    #blogger-comments-page { padding: 20px; display: none;border:1px solid orange;border-radius:5px;}

    #fb-comments-page{border:1px solid blue;border-radius:5px;padding:20px;margin-top:10px;}

    .facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));

    background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -o-linear-gradient(top, #3093c7, #1c5a85);

    background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);

    }

    .facebook-tab:hover {border:1px solid #1c5675; background-color: #26759e;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));

    background-image: -webkit-linear-gradient(top, #26759e, #133d5b);

    background-image: -moz-linear-gradient(top, #26759e, #133d5b);

    background-image: -ms-linear-gradient(top, #26759e, #133d5b);

    background-image: -o-linear-gradient(top, #26759e, #133d5b);

    background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);

    }

    .blogger-tab {float: left;cursor: pointer;border:1px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #ffd65e;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04));

    background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);

    background-image: -moz-linear-gradient(top, #ffd65e, #febf04);

    background-image: -ms-linear-gradient(top, #ffd65e, #febf04);

    background-image: -o-linear-gradient(top, #ffd65e, #febf04);

    background-image: linear-gradient(top, #ffd65e, #febf04);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);

    }

    .blogger-tab:hover{ border:1px solid #f7b800; background-color: #ffc92b;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc92b), color-stop(100%, #ce9a01));

    background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: linear-gradient(top, #ffc92b, #ce9a01);filter:progid:DXImageTransform
m.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);

    }


  • Copy kode Dibawah ini dan letakkan di atas kode</head>.


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


  • Lalu cari kode <div class='comments' id='comments'> lalu pastekan kode HTML di bawah ini tepat di bawahnya kode tersebut. jika kode tersebut ada 2 atau lebih, pastekan kode dibawah ini di bawah semua kode yang mirip <div class='comments' id='comments'>.


<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Komentar Dari Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar di Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Komentar Dari Blogger'>
<data:post.numComments/> Komentar di Blogger
</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'/><div align='left'><font color='blue' size='4'><strong>Silahkan Berkomentar Melalui Akun Facebook Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcujOIhOrQXhTs76wLrmd1QmzUNN1h3OU-rT8KysHFFLSQ6lC5Cem1vFgLvwe7tpM9-Z7kJlZOm2-Vudt1UhZLyZQTKbwgrO_TCY9us-FIh-UYmr2h8cOa8YVLWj5J74e2oxvlxHmPxx8/s1600/facebook-icon.png'/><div align='right'><a href='http://seociyus.blogspot.com/2013/02/cara-membuat-komentar-facebook-keren-di-blog.html' target='blank'><small>Get This Facebook Comment</small></a></div>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div align='left'><font color='orange' size='4'><strong>Silahkan Tinggalkan Komentar Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ld6hvW_EY35zU7lRxd9_nu93hO_G1UOz0WWoa02ih5kE99vnbo1_5uGT0qPWvVSXPvue6r5TkfRPs4b2K_Cg1Bucjb5JzFRKURU_Hevhq4HILNZhsMTrv1BqdjScE7rMAmmdYxcr52kX/s1600/Blogger-icon.png'/>


  • -Ubah kode bewarna Biru untuk mengatur jumlah komentar facebook yang sobat inginkan sesuai keinginan
    -Ubah kode bewarna Merah untuk mengatur ukuran kotak komentar facebook yang sobat inginkan sesuai keinginan
  • Terakhir, Cari kode berikut
    <h4><data:post.commentLabelFull/>:</h4>
    lalu hapus kode tersebut, jika ada 2, hapus kedu kode tersebut.
  • Save Template

Comments

  1. Gan Cara Liat Aplikasi Id Facebook Gimana Yach
    kunjung Balik
    http://rolannuansyah.blogspot.com

    ReplyDelete
    Replies
    1. Cara melihat id facebook silahkan sobat kunjungi link ini: http://graph.facebook.com/NAMA ID

      ganti NAMA FB, Dengan nama ID FB KAMU
      cara mengetahui nama ID FB KAMU, sikahkan kamu masuk keprofil kamu dan lihat alamat urlnya:
      contoh: https://www.facebook.com/Scholovers = Scholovers adalah Nama ID FB saya.

      klau masih bingung silahkan di tanya lgi ya...

      Delete
  2. Gan Thanks Atas Infonya
    kunjung balik dong gan makasih

    ReplyDelete
  3. yg jadi masalah saat kita klik tab komentar blog terus kita coba lagi buka komentar facebook tiba2 komentar yg facebooknya malah menghilang bukan cuman gw yg ngalamin smua blogger juga mengalami hal yg sama, ada solusi ga....

    ReplyDelete
    Replies
    1. cara di atas udh di cba ap blum?

      :-?

      Delete
    2. uda gan, bukan cuman gw yg alamin smua blogger juga ngalamin yg sama...

      Delete
  4. thanks ya brotha...
    keren tuh....
    tapi ada kelemahanya...
    kalu komentar di blog..
    komentar fbnya hilang..
    mampir di blogku ya...
    http://groowlpsycho.blogspot.com/

    ReplyDelete

Post a Comment

Syarat-syarat Berkomentar:

☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM

NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.

Terima Kasih.