Saya
rasa dengan screnshot diatas Anda sudah paham mengapa judul postingan
ini bertemakan membuat komentar blog dan facebook berdampingan. Sebelum
kita masuk ke cara pembuatannya, saya ingin sekali menyampaikan kepada
Anda bahwa, komentar facebook yang kita pasang di blog menggunakan trik
ini, juga secara tidak langsung merupakan sarana promosi blog yang kita
miliki. Artinya jika pengunjung menggunakan komentar facebook untuk berkomentar maka secara otomatis ada pemberitahuan di wall si pengunjung tersebut bahwa dia berkomentar di blog anda.
Cara Membuat Komentar Facebook Dan Blog Berdampingan :
1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang pada 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: #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;}
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 Facebook anda' 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://blogmashanif.blogspot.com/" target="_blank"
rel="follow">Blog Mas Hanif</a></span>
Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan http://www.facebook.com/hanif.maliki1 maka
ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum
merubah ID Anda maka yang tertera adalah berupa angka. Udah ngertikan?
jika sudah maka Akan saya lanjut.
8. 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.
<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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan
lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati,
tapi kalu boleh saya kasih saran, sesuaikanlah dengan
lebar template anda agar kelihatan rapi. Dan perhatikan pula 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.
Contoh :
<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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)
9. Kemudian klik Save, dan lihat hasilnya.
Jika
semua langkah-langkah membuat komentar blog dan facebook berdampingan
ini anda ikuti dengan benar, maka seharusnya anda berhasil melakukannya.
Namun jika Anda memiliki struktur template yang berbeda, anda dapat
meletakkan kode pada poin No.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
Artikel keren lainnya:
makasih gan udah berkunjung
BalasHapus