Membuat komentar facebook pada blogger seperti yang terlihat di bawah ini:
|
tampilan komentar facebook |
1. Login ke account blogger
2. Klik rancangan lalu klik Edit HTML
3. Download template dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode
]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini
di atas kode ]]></b:skin>
.comments-page { background-color: #ffffff;}
#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;}
7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
<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 Anda disini' 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><span style="font-size: 50%">Widget edited by <a href="http://get-cozythings.blogspot.com/search/label/blogger" target="_blank" rel="follow">Cyquita</a></span>
Perhatikan tulisan yang berwarna kuning di atas, ganti dengan ID facebook Anda, misalkan
https://www.facebook.com/Cyquita (ID facebook bisa di dapat dengan mengcopy URL facebook anda). Udah ngertikan ? jika sudah maka Akan saya lanjut.
9. Kemudian cari kode
<div class='comments' id='comments'>
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'>
yang pertama dan kedua (dua-duanya!).
<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='4' width='585'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Perhatikan angka yang berwarna merah dan biru diatas, angka 4 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. jumlah ini dapat disesuaikan dengan blog agar terlihat rapi. Dan perhatikan kode yang berwarna merah, jika penempatan kode dibawah
<div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.
10. Kemudian klik save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini diikuti dengan benar, maka seharusnya comment facebook ini akan keluar otomatis. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang terlihat di blog
get cozy things. Namun jika memiliki struktur template yang berbeda, letakkan kode yang terdapat pada no.8
hanya diatas kode
<div class='comments' id='comments'>.yang kedua.