Memasang Kolom Komentar Facebook dan Blogger Model Tab

Cara Membuat kolom komentar facebook dan blogger berdampingan dengan model tab adalah terobosan awal blogger dalam menambahkan kolom komentar model tab. tutorial ini sebenarnya 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 akhirnya bisa menjadikan kedua kolom komentar tersubut berada sejajar. Ada banyak blog yang sudah mengshare tutorial seperti ini, namun tidak ada salahnya jika saya juga membagikannya diblog saya.

Banyak yang berkata bahwa penambahan ini justru memperlambat loading page blog kita. Memang sih ada benarnya juga, namun apa salahnya jika mencoba untuk memasangnya, siapa tahu, pengunjung blog Anda kebanyakan berasal dari facebook sehingga mereka mudah untuk melakukan interaksi dengan blog Anda melalui media komentar facebook ini. Silahkan check tampilannya pada gambar di bawah ini:

Tampilan Komentar Facebook

Tampilan Komentar Blogger

Baiklah kita mulai saja tutorialnya.

1. Silakan Login Blogger, Masuk ke blog Anda, Pilih Theme lalu klik Edit HTML

2. Tambahkan tiga 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'/>

Kemudian isikan atau ganti semua semuanya sesuai dengan yang kode yang Anda miliki. Jika belum tahu caranya, silahkan lihat tutorialnya pada artikel sebelumnya tentang "Cara Mendapatkan kode Admin ID dan App ID"

3. Silakan cari kode berikut ini pada template Anda <div class='comments' id='comments'>
Gunakan Ctrl+F untuk mempermudah pencarian.

4. Setelah ditemukan silahkan salin kode di bawah ini dan letakkan tepat dibawah kode <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>

Silahkan ubah ukuran kolom komentar width='550' sesuai dengan ukuran template blog Anda. Apabila pada template blog Anda terdapat 2 atau lebih kode <div class='comments' id='comments'> silahkan pilih salah satunya saja.

5. Save template Anda dan lihat hasilnya

6. Selamat, sekarang Anda sudah memiliki tampilan komentar facebook dan blogger

Mendapatkan Page Id Facebook

Catatan penting yang perlu Anda perhatikan pada tutorial ini adalah harap diperhatikan baik-baik.
dan bagaimana cara mendapatkan kode halaman facebook atau "Page ID Facebook" yang bisa ditemukan di halaman fans page facebook. Syarat terpenting adalah Anda harus memiliki halaman facebook, jika tidak, maka bisa menggunakan alternatif yaitu kode Aplikasi facebook.

Pada bagian 'Kode ID Aplikasi Facebook’, silahkan ganti kode tersebut dengan kode Halaman
Cara melihat 'Kode ID FanPage Facebook’ adalah: Masuklah ke Halaman Facebook Anda, lalu masuk ke About / tentang, kemudian scroll kebawah, Maka akan Muncul seperti gambar dibawah ini

Silakan copy dan pastekan kode tersebut pada tag meta facebook di template blog Anda. Namun jika

Anda tidak punya Halaman Facebook saat ini? Anda bisa mengganti tulisan 'Kode ID FanPage Facebook dengan APP ID FB. Diblog ini saya menggunakan Kode App Id FB sebagai moderator dengan memunculkan fitur "Moderation Tool" pada komentar pada facebook.