Cara Terbaru Memasang Komentar Facebook Pada Blogspot dengan Tampilan Responsive - Simple Tutorial

Berbicara dunia maya entah dari jenis website atau juga sosial media sebenarnya saya bukan jagonya dalam hal memahami ke 2 sifat sistem tersebut. namun sifat sosial media tidak akan pernah tertinggal jika kita memiliki sebuah website yang kita kelola tanpa mencantumkan link sosial media kepada para penggunjung blog.

Facebook adalah salah satu sosial media yang berposisi di peringkat besar dan mempunyai pengguna aktif diseluruh dunia, jika sebelumnya kalian memiliki suatu bisnis online atau juga sebuah website maka jangan sampai kalian tinggalkan yang namanya komentar facebook pada blog sobat masing-masing.

Adapun dalam tutorial kali ini yang akan saya bagikan tentang tips pemasangan komentar facebook pada blog yang dapat kita lakukan secara mudah tanpa ribet dan tentunya dapat dilakukan bagi yang baru belajar masalah kode HMTL.

Cara memasang komentar facebook di blogspot

Silahkan kalian buka Dashbor > Tema > Edit HMTL

Jika sudah cukup tekan ctrl+f pada keyboard masing-masing yang mana fungsinya untuk mencari nama kode HMTL yang terdapat pada template sobat.

Setelah itu silahkan sobat copy kode CSS dibawah ini dan letakan sebelum dibagian ]]></b:skin>

/*facebook comments */
.fbbox-comments {
box-sizing: border-box;
-moz-box-sizing: border-box;
background:#fff;
border:0;
margin: 0 0 20px;
}
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;}
.fotleft{float:left}
.fotright{float:right;text-align:right;}

Lalu ketik tulisan <body> dan copy paste kode dibawah ini tepat dibagian bawah <body>.

<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'ID_APP_SOBAT',
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>

Selanjutnya silahkan lagi kalian cari kode dengan tulisan <b:includable id='postQuickEdit' var='post'> atau </b:includable> dan letakan kode dibawah ini tepat diatas kode </b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
	//<![CDATA[
	$(window).bind("load", function(){    
	  var container_width = $('.fbbox-comments').width();    
	  var fburl=(window.location.href);
	  var fbfix=fburl.indexOf('?');
	  var fburlfix = fburl.substring(0, fbfix != -1 ? fbfix : fburl.length); 
		$('.fbbox-comments').html('<div class="fb-comments" ' + 
		'data-href="' + fburlfix + '"' +
		' data-width="' + container_width + '" data-num-posts="5"></div>');
		FB.XFBML.parse( );    
	}); 
	//]]>
	</script>
	<div class='fbbox-comments' style='width:100%;margin-top:20px'>
	<div class='fb-comments' data-num-posts='2' data-width='650' expr:data-href='data:blog.url'/>
	</div>	</b:if>

Terakhir klik simpan

Ganti tulisan yang saya beri warna merah dengan ID_APP facebook kalian masing-masing.

Selanjutnya silahkan sobat semua lihat hasilnya melalui kolom komentar blog kalian, yang mana sudah berhasil muncul, jika masih ada yang belum muncul coba untuk ikuti tutorial diatas dengan teliti, sebab setiap kode HMTL disetiap template berbeda-beda.

Kode script plugin komentar diatas adalah sciript kode template evo magz versi premium yang dikembangkan oleh mas sugeng, jadi disini saya membagikan kode tersebut sesuai dengan susunan seperti tempalte evo magz.