Sunday, January 10, 2016

Cara Membuat Komentar Facebook Responsive pada Blog

Author - Xcrotzjr Date - 3:49 PM Jquery

Tutorial Lengkap Cara Membuat Komentar Facebook Responsive pada Blog - Okay gan admin mau share tutorial bagaimana cara membuat kolom komentar facebook pada posting blog. Cara ini sangatlah mudah. Sebenarnya kolom komentar dari blogger sendiri memang sudah ada dari awalnya. Namun mungkin bagi yang tidak memiliki akun yang sesuai untuk komentar blogger mungkin akan kesulitan. Dengan menyediakan layanan komentar menggunakan akun facebook ini, otomatis agan juga menambahkan fitur komentar untuk blog agan.

Untuk memasang atau membuat kolom komentar pada posting blog agan tidaklah sulit gan. Tutorial ini admin rasa sangatlah lengkap dan sangat mudah untuk dimengerti, bahkan bagi para blogger pemula. Jika memang kenyataan nya agan merasa kesulitan, agan bisa tanyakan pada kolom komentar atau jika ingin mengeluhkan itu bisa lewat kolom contact me di menu atas.

Tutorial Lengkap

Pertama agan masuk ke blogger, template dan edit html. Setelah itu silahkan agan pasang script html dibawah ini tepat dibawah kode <head>

<meta content='Id Facebook Agan' property='fb:admins'/>
<meta content='Id Aplikasi Blog Agan' property='fb:app_id'/>

Kedua masih dalam edit html, pasang script jquery dibawah ini tepat diatas 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>

Ketiga tetap di edit html pada template, pasang script html dibawah ini tepat dibawah kode <data:post.body/>

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

Selesai gan, tinggal disave template dan cekidot langsung blog agan. Jika agan kesulitan mendapatkan id facebook admin dan id aplikasi blog nya agan bisa tanyakan pada kolom komentar atau lewat contact me diatas. Bisa hubungi admin lewat sosmed atau melalui form. Terimakasih