Sunday, June 30, 2013

Cara Membuat Komentar Tampilan Facebook Keren dan Mantap Di Blog

Pengunjung dari Facebook? yah, itu sangat banyak, maka dari itu mari kita coba memanfaatkan meminta komentar mereka dengan cara memodifikasi sedikit template / tema blog kita, ayo kita lakukan!



Pertama Kita harus Mendaftar dan Mendapatkan ID Aplikasi Facebook
 Berikut panduannya :

  • Pertama-tama kalian harus punya ID aplikasi di Facebook . Kalau belum punya silahkan daftar dan buat dulu di Facebook Developers. Ahmad bakal kasih tau cara buatnya tenang aja teman.
  • Dari halaman facebook developers, log in dulu kalo udah kalian klik tab Apps di bagian atas.     Kemudian klik tombol Register as a Developers di kanan atas, lalu ikuti aja petunjuknya dan di isi data lengkap kalian termasuk no handphone buat verifikasi .


  • Sudah berhasil daftar gantemang ada di kanan atas terus bakal muncul pop up, lalu tinggal di isi aja App Name sama App Namespacenya sesuai keinginan kalian kalo Web Hostingnya boleh dicentang atau dibiarin aja juga gak apa-apa . Kalau udah tinggal klik Lanjutkan, dan selesai .


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


Kemudian
Cara Memasang Komentar Facebook Pada Blog
  • Lanjut ke tahap pemasangan komentar facebook di blog . Pertama masuk ke Blogger lalu pilih Template kemudian Edit HTML dan centang Expand Widget Templates . Kita mulai dari atas biar gak bolak-balik.
  • Copy kode di bawah ini lalu pastein di bawah kode <head> .
Ini Kodenya

  • 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 .
  • Sekarang cari kode ]]></b:skin> lalu copy dan paste kode CSS di bawah ini di atas kode ]]></b:skin> .
Ini Kodenya
.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.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01); }

  • Tahap berikutnya copy dan paste kode javascript di bawah ini di antara kode ]]></b:skin> dan </head> . Terserah mau di pastein di bagian mananya, kalau bisa di atas kode </head> saja .
Ini Kodenya

    • Langkah terakhir , cari kode <div class='comments' id='comments'> lalu pastein kode HTML di bawah ini tepat di bawahnya . Kodenya bisa ada 2 atau 1 tergantung templatenya, kalo ada 2 pastein di bawah kode yang pertama . Biasanya kalau template Blog nya tidak pakai threaded comment tidak bisa .
    Ini Kodenya
    Komentar di Blogger
    Silahkan Berkomentar Melalui Akun Facebook Anda

    Silahkan Tinggalkan Komentar Anda


    • Buat jumlah komentar facebook yang mau di tampilin kalian ubah aja angka 5 sesuai keinginan dan ganti angka 500 untuk ukuran lebar komentar facebooknya di sesuaiin sama template Blog kalian . 
    • Belum selesai , satu step lagi sekarang cari di bawah kode tadi kode <h4><data:post.commentLabelFull/>:</h4> lalu hapus, kalau ada 2 hapus keduanya tapi jika tidak ada tidak apa, sekarang tinggal di preview buat mastiin tidak ada masalah, baru di Save template .

    Sekian Tutorial dari Ahmad tentang Cara Membuat Komentar Tampilan Facebook Keren dan Mantap Di Blog
    Semoga bermanfaat buat teman, silahkan komentarnya :)
    Posted by at

    1 comment:

    1. UnknownSeptember 13, 2019 at 4:59 AM

      I am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.

      Checkout my site to Buying Facebook Video ViewsI am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.

      Checkout my site to Buying Facebook Video Views

      ReplyDelete

    Subscribe to: Post Comments (Atom)