Cara Memasang Kolom Komentar Facebook di Blog

Cara Mudah Memasang Kolom atau Kotak Komentar Facebook (Facebook Comment Box) di Blog.

KOTAK komentar Facebook memudahkan pengunjung atau pembaca berkomentar sekaligus share posting kita ke akun Facebooknya tanpa harus login ke blogger atau ke akun Google.

Umumnya pengguna internet punya akun Facebook dan login ke media sosial tersebut saat online. Saat Googling atau Browsing, mereka dalam keadaan login ke FB, sehingga akan mudah menulis komentar di posting blog.

Namun, ada catatan penting. Ada risikonya memasang kotak komentar Facebook, yaitu jika blog Anda ramai pengunjung, maka akan serangan komentar spam yang jualan obat, blog judi online, situs porno, dan spammer dan spambot lainnya! Waspadalah...!!!

Cara #1. Memasang Kolom Komentar Facebook di Blog

Cara Memasang Kotak Komentar Facebook di Blog sangat mudah, yakni hanya dengan menyimpan kode berikut ini di bawah kode <div class='comments' id='comments'>

Ini kode kotak komentar Facebook yang harus dipasang di dalam template blog Anda:

<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'><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><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>

Cara #2. Memasang Kolom Komentar Facebook di Blog

Jika cara mudah di atas gagal, tidak muncul alias tidak berhasil, maka lakukan cara berikut ini:

1. Login ke akin Facebook Anda
2. Buat Aplikasi Facebook: Creat New App
3. Copas kode berikut ini di bawah kode <body>

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'AppId',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

4. Temukan kode berikut ini dan ganti kode merah. Jika tidka menemukannya, silakan COPAS dan simpan di bawah kode <head>

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='AppId ' property='fb:app_id'/>
<meta content='Your Blog Name' property='og:site_name'/>
<meta content='http://www.facebook.com/your-facebook-username' property='fb:admins'/>
<meta content='article' property='og:type'/>

5. Copas kode berikut ini di bawah kode <div class='post-footer-line post-footer-line-1'> atau di atas kode <div class='comments>

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/>
</div>
</div>
</b:if>

6. Save Template!

Cara 3#. Recommended

Cara ketiga ini recommended pisan, tentu saja jika kedua cara di atas belum berhasil juga.

1. Pasang Meta Facebook
Simpan kode berikut ini di bawah kode <head>

<meta content='123456789' property='fb:admins'/>
<meta content='123456789' property='fb:app_id'/>

Ganti angka 123456789 dengan FB ID Admin dan FB APP milik Anda. Jika belum punya, silakan baca: Cara Mengetahui Facebook Admin ID (fb-admins) dan App ID (app_id)

2. Pasang KODE JavaSscript
Simpan kode berikut ini di atas kode </head>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>

3. Pasang KODE JS/HTML
Simpan kode kotak komentar Facebook untuk blogger berikut ini (pilih salah satu):

Di bawah kode <data:post.body/> kedua atau ketiga; atau
Di atas <div id='related post'> atau
Di dalam kode <div class='post-footer-line post-footer-line-3'> </div>

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

Misalnya, jika dipasang di antara kode <div class='post-footer-line...>, maka hasilnya seperti ini:

<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
</div>

Itu dia Memasang Kolom Komentar Facebook di Blog. Semoga berhasil. (http://bloggerbandungnih.blogspot.com).*