Archive for 06/17/13
Cara Membuat Comment Box Facebook di Blogger,bersebelahan dengan komentar blog di bawahnya.
Baiklah kali ini Renita Sastrowardoyo akan
membagikan Tips dan Trik yang sebenarnya sudah umum, namun di blog lain masih
sangat rumit untuk di peraktekan, dan kali ini saya akan membuatnya agar lebih
sederhana dan mudah di aplikasikan… :D semoga bermanfaat ya, kalo bermanfaat
komen :D .. *tiadaKesanTanpaKomenKalian* #udahKekUltahAje ^___^
Cara Membuat Comment Box Facebook di Blogger,bersebelahan dengan komentar blog di bawahnya.
Langsung tanpa basa basi… karena sudah di tanak nasinya..
ini dia ::
3. Klik +Create New App atau +Buat aplikasi baru (jika Facebook kalian menggunakan Bahasa Indonesia)
 |
| Klik +Create New App |
4. Maka akan ada tampilan seperti di bawah ini, isikan App Name dengan nama aplikasi yang anda inginkan, kalau saya memilih disamakan dengan nama blog saya. Jangan lupa untuk mencentang Web Hosting nya "Yes, I would like free web hosying ....."
 |
| Jangan lupa untuk di centang |
5. Maka akan muncul App ID, dan App Secret, saran saya adalah print screen atau catat :D
Untuk pengisian Field-field selanjutnya, isi yang saya lingkari saja, sesuaikan dengan blog anda.
 |
| Isi yang saya lingkari saja, sesuaikan dengan blog anda *) untuk memeperbesar gambar, klik saja |
Nah selesailah membuat aplikasi untuk komentarnya, sekarang kita menuju blog anda untuk menyematkan aplikasi ini di blog anda.
Cara Membuat Kotak Komentar Facebook di Blog :
1. Masuk Bloger anda. Lalu pilih Edit HTML seperti gambar yang di lingkari
 |
| Pilih Edit HTML *) untuk memeperbesar gambar, klik saja |
2. Lalu Klik dimana saja di tulisan / Script yang ada di blog anda, setelah di klik anda carilah tulisan ]]></b:skin> dengan cara pijit " CTRL + F " bersamaan.
 |
| Klik dimana saja di salah satu baris Script blog anda lalu CTRL + F *) untuk memeperbesar gambar, klik saja |
3. Lalu Copy-Paste kan CSS ini tepat di bawah ]]></b:skin>
.comments-page { background-color: #00BFFF;}
#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;}
4. Masih menggunakan CTRL + F , cari tulisan </head> lalu Copy-Paste kan CSS ini tepat di Atas </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' 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>
Lalu ganti "ID FB Anda" menggunakan ID FB anda, cara mengetahuinya adalah buka profil FB anda lalu akan muncul seperti ini
 |
| Ini adalah cara mengetahui ID FB anda |
Contoh penggantian ID FB Anda :: ======>> <meta content='renita.widiastari' property='fb:admins'/>
5. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'> .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah 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='5' width='500'/>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://impoint.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Media Blogger</a></b>
</div>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Lalu, Klik Simpan Template dan lihat hasilnya. Jika Kotak Komentar Facebook belum terlihat juga mungkin template tidak memiliki script kode yang support dengan facebook.
Maka, cari kode ini <html dan ganti dengan kode di bawah ini :
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Simpan Template Anda.
Sekian... semoga dapat membantu, dan jangan lupa tinggalkan komentar :D
