MULTI PASTE - Facebook adalah salah satu situs jejaring sosial yang paling populer, itulah sebabnya mengapa menggunakan Plugin Facebook Comments di blog menjadi penting. Dengan adanya Form Komentar Facebook, selain dapat memancing minat pengunjung untuk memberikan komentar terhadap artikel yang dipublish, juga Form Komentar Facebook akan memberikan kemudahan bagi pengunjung untuk berkomentar, karena mungkin saja pengunjung tersebut memiliki Account Facebook tetapi belum memiliki account Google maupun account LiveJournal, WordPress, Typepad, AIM, ataupun OpenID seperti yang terdapat pada Form Komentar Standart bawaan bloger, sekalipun pada form standart ini tersedia account Anonymous.
Pada artikel kali ini, akan dipraktekkan bagaimana memasang Plugin Facebook Comments tanpa mengganti Form Komentar bawaan bloger, pengunjung dapat memilih akan menggunakan Form Komentar Facebook atau menggunakan Form Komentar Blogger dalam memberikan komentar di blog, karena widget ini akan tampil dalam bentuk Multi Tab. Tab dapat klik dan Form Komentar akan ditampilkan sebagai layar yang terpisah dan akan ditampilkankan pula jumlah komentar pada masing-masing tabbed, widget ini menggunakan kode Javascript dan CSS. Tampilan Facebook Comments dan Blogger Comments dalam bentuk multi tab komentar di blog seperti di bawah ini.
Syarat utama memasang Plugin Facebook Comments ini adalah anda harus membuat satu Application ID di Facebook atau API Key Facebook, caranya cukup sederhana, ikuti langkah di bawah ini.
- Anda harus dalam posisi Login ke Facebook
- Kunjungi Facebook Developer Pages
- Masukkan Application Name jika nama aplikasi yang ada masukkan valid klik tombol Continue
- Masukkan kode captcha yang muncul pada kotak konfirmasi lalu klik tombol Submit.
- Pada halaman selanjutnya masukkan nama domain blogspot.com pada kotak App Domain di bagian Basic Info dan pada bagian Website, masukkan URL blog anda pada kotak Site URL seperti gambar di bawah ini, kemudian klik tombol Save
- Catat Application ID atau API Key Facebook yang terbentuk, lihat gambar di bawah.
Berikut adalah langkah untuk memasukkan Plugin Facebook Comments di blog
- Login ke blogger dengan ID anda
- Pilih menu Template, sebelum melakukan perubahan sebaiknya lakukan Backup Template terlebih dahulu.
- Klik Template >> Edit HTML >> Proceed beri tanda ✔ check pada kotak Expand Widget Templates
- Cari kode <head> pada dokumen HTML template anda.
- Copy kode di bawah ini dan paste tepat di bawah kode <head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDq42aw79vFN4TZ4JrMe-c98F5zcSkFvkwAPJBwgx2_gagxF-Sz_uq92izzXB_1-jFS_KkvxFcgIF1Y8pRFbe7Vvel0Yx72iXP7NtmQs74C3KqwRSweQGDFtDG5jNGGjK7aVZciA9Wgr0/s400/fbcomment.png' property='og:image'/>
<meta content='API Key Facebook' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDq42aw79vFN4TZ4JrMe-c98F5zcSkFvkwAPJBwgx2_gagxF-Sz_uq92izzXB_1-jFS_KkvxFcgIF1Y8pRFbe7Vvel0Yx72iXP7NtmQs74C3KqwRSweQGDFtDG5jNGGjK7aVZciA9Wgr0/s400/fbcomment.png' property='og:image'/>
<meta content='API Key Facebook' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>
- Ganti kode yang ditulis dengan warna biru tebal dengan API Key Facebook yang telah anda buat sebelumnya, anda juga dapat mengganti URL image (kode dengan tulisan hitam tebal) dengan URL image anda, dengan catatan ukuran image 30px x 30px
- Selanjutnya cari kode <html bentuknya kira-kira seperti di bawah ini, setiap template kemungkinan akan berbeda.
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
- Ganti kode <html tersebut di atas dengan kode di bawah ini
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Sehingga kode akan menjadi seperti di bawah ini. Beri spasi antara kode yang baru saja anda tambahkan dengan kode yang sudah ada sebelumnya.
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
- Selanjunya cari kode ]]></b:skin>
- Copy kode CSS di bawah ini dan paste di atas kode ]]></b:skin>
/*--- Facebook Comments By MP ----*/
.comments-page {background-color: #f2f2f2; width:520px;}
#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;}
.comments-page {background-color: #f2f2f2; width:520px;}
#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;}
- Anda dapat mengganti warna background #f2f2f2 sesuai yang anda inginkan, gunakan HEX Color Generator Tool yang ada pada sidebar blog ini untuk mengetahui kode warna, sesuaikan pula lebar form komentar width:520px dengan design template anda.
- Selanjutnya cari kode <div class='comments' id='comments'>
- Copy dan paste kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> jika anda menemukan lebih dari satu kode seperti ini pada dokumen HTML template anda gunakan saja kode yang pertama.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDq42aw79vFN4TZ4JrMe-c98F5zcSkFvkwAPJBwgx2_gagxF-Sz_uq92izzXB_1-jFS_KkvxFcgIF1Y8pRFbe7Vvel0Yx72iXP7NtmQs74C3KqwRSweQGDFtDG5jNGGjK7aVZciA9Wgr0/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Facebook 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/> Blogger 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 colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by <b> <a href='http://multipaste.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>
</b:if>
</div>
<fb:comments-count expr:href='data:post.url'/> Facebook 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/> Blogger 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 colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by <b> <a href='http://multipaste.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>
</b:if>
</div>
- Jika anda melakukan perubahan ukuran lebar form komentar untuk kode CSS pada point 11 di atas, samakan dengan kode ini width='520'
- Jika terjadi error pada saat menyimpan Template hapus kode yang diarsir kuning pada kode di atas.
- Simpan Template anda dengan menekan tombol Save Template
- Langkah terakhir periksa blog anda, buka salah satu artikel dan pastikan Form Komentar Facebook telah tampil di sana, jika berhasil ucapkan Alhamdulillah...