Memasang Kolom Komentar Facebook Dan Blogger Model Tab
Cara Membuat kolom komentar facebook dan blogger berdampingan dengan model tab yakni terobosan awal blogger dalam menambahkan kolom komentar model tab. tutorial ini sebetulnya muncul lebih awal sebelum penambahan disqus facebook dan blogger yang kemudian disatukan dalam tab komentar pada blog.
Awalnya, penambahan kolom komentar facebook hanya ditempatkan diatas kolom komentar blogger, namun para designer blog karenanya sanggup mengakibatkan kedua kolom komentar tersubut berada sejajar. Ada banyak blog yang sudah mengshare tutorial menyerupai ini, namun tidak ada salahnya kalau aku juga membagikannya diblog saya.
Banyak yang berkata bahwa penambahan ini justru memperlambat loading page blog kita. Memang sih ada benarnya juga, namun apa salahnya kalau mencoba untuk memangnya, siapa tahu, pengunjung blog Anda kebanyakan berasal dari facebook sehingga mereka gampang untuk melaksanakan interaksi dengan blog Anda melalui media komentar facebook ini. Silahkan check tampilannya pada gambar di bawah ini:
Baiklah kita mulai saja tutorialnya.
1. Silahkan Login Blogger, Masuk ke blog Anda, Pilih Theme kemudian klik Edit HTML
2. Tambahkan dua meta tag berikut ini di bawah <head> apabila belum ada dalam template blog Anda.
3. Silahkan cari instruksi berikut ini pada template Anda <div class='comments' id='comments'>
Gunakan Ctrl+F untuk mempermudah pencarian.
4. Setelah ditemukan silahkan salin instruksi di bawah ini dan letakkan sempurna dibawah instruksi <div class='comments' id='comments'>
6. Selamat, kini Anda sudah mempunyai tampilan komentar facebook dan blogger
Catatan penting yang perlu Anda perhatikan pada tutorial ini yakni harap diperhatikan baik-baik
Awalnya, penambahan kolom komentar facebook hanya ditempatkan diatas kolom komentar blogger, namun para designer blog karenanya sanggup mengakibatkan kedua kolom komentar tersubut berada sejajar. Ada banyak blog yang sudah mengshare tutorial menyerupai ini, namun tidak ada salahnya kalau aku juga membagikannya diblog saya.
Banyak yang berkata bahwa penambahan ini justru memperlambat loading page blog kita. Memang sih ada benarnya juga, namun apa salahnya kalau mencoba untuk memangnya, siapa tahu, pengunjung blog Anda kebanyakan berasal dari facebook sehingga mereka gampang untuk melaksanakan interaksi dengan blog Anda melalui media komentar facebook ini. Silahkan check tampilannya pada gambar di bawah ini:
 | |
| tampilan dikala menentukan komentar facebook |
 |
| tampilan dikala menentukan komentar blogger |
Baiklah kita mulai saja tutorialnya.
1. Silahkan Login Blogger, Masuk ke blog Anda, Pilih Theme kemudian klik Edit HTML
2. Tambahkan dua meta tag berikut ini di bawah <head> apabila belum ada dalam template blog Anda.
<meta content='Kode ID Facebook admin' property='fb:admins'/> <meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/> <meta content='Kode ID halaman Facebook' property='fb:pages'/>3. Silahkan cari instruksi berikut ini pada template Anda <div class='comments' id='comments'>
Gunakan Ctrl+F untuk mempermudah pencarian.
4. Setelah ditemukan silahkan salin instruksi di bawah ini dan letakkan sempurna dibawah instruksi <div class='comments' id='comments'>
<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='550'/></b:if></div> <div class='comments comments-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='Kode ID FanPage 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> <style>.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;}</style>6. Selamat, kini Anda sudah mempunyai tampilan komentar facebook dan blogger
Catatan penting yang perlu Anda perhatikan pada tutorial ini yakni harap diperhatikan baik-baik
- Pada bab 'Kode ID Aplikasi Facebook’, silahkan ganti instruksi tersebut dengan instruksi Halaman
- Cara melihat 'Kode ID FanPage Facebook’ adalah: Masuklah ke Halaman Facebook Anda, kemudian masuk ke About / tentang, kemudian scroll kebawah, Maka akan Muncul menyerupai gambar dibawah ini
kode page ID
- Anda tidak punya Halaman Facebook dikala ini? Anda sanggup mengganti goresan pena 'Kode ID FanPage Facebook dengan App ID FB. Diblog ini aku memakai Kode App Id FB sebagai moderator dengan memunculkan fitur "Moderation Tool" pada komentar pada facebook.
 |
| Moderation tool facebook |
- Silahkan ubah ukuran kolom komentar width='550' sesuai dengan ukuran template blog Anda.
- Apabila pada template blog Anda terdapat 2 atau lebih instruksi <div class='comments' id='comments'> silahkan pilih salah satunya saja.