3 CARA MEMBUAT KOTAK KOMENTAR FACEBOOK DI BLOG

0
564

Cara Membuat Kotak Komentar Facebook di Blog Dalam 1 Menit Done

Cara Membuat Kotak Komentar Facebook di Blog

Cara Membuat kotak komentar facebook di blog bukanlah hal yang sulit sobat, tidak perlu menempuh sekolah atau kulyah juga tidak perlu mengambil jurusan pendidikan programmer lebih detailnya lagi sobat tidak perlu menunggu gelar Prof master Kode HTML hehe… yang pastinya cara membuat kolom komentar facebook di blogspot sangatlah mudah sekali.

Cara membuat kotak komentar Facebook di Blog blogspot memang berbeda ketika menggunakan CMS wordpress tentunta lebih mudah membuat kotak komentar di worpress karena ada bantuan plugin yang bisa secara otomatis terpasang. Tapi juga bukan berarti membuat kolom komentar facebook di blog sulit..NO!..gampang kok asal telaten.

Tapi sedikit himbauan bagi yang ingin memasang kotak komentar facebook via kode html blognya..harus hati2 juga kalau anda baru pertama kali mengotak atik kode HTML soalnya HTML blog merupakan satu jaringan yang akan menjadikan blog sobat bisa terbentuk dengan rapi. Kalau salah bahkan ada yang hilang dari beberapa kode html yang terkait maka bisa – bisa blog sobat tidak bisa dibuka atau terjadi EROR alias not found dan sebagainya. Tapi jangan takut itu hanya sekedar himbauan kecil agar sobat juga bisa melakukan sesutau secara teliti agar hasil membuat kotak komentar facebook di blog sobat bisa rapi dan berhasil 100%.

Wahh kepanjangan ngocehnya ni..oke..bang tohir kali ini akan berbagi cara membuat kotak komentar facebook di blog dengan 3 cara mudah berikut ini :

Cara Pertama: Memasang Kolom komentar facebook di blog responsive.
Kok responsive?..maksudnya?…yess…gini mas mba ade saudara2ku yang baik..blog terbagi menjadi 3 kalau menurut ane..pertama blog yang loadingnya lemot alias berat, untuk membuka blog ini butuh kesabaran menunggu. Kedua : blog yang loadingnya sedang : agak lumayan cepat kebukanya. Ketiga Responsive : blog ini lumayan keren, disamping ringan juga tidak membuat jengkel kalau buka setiap halaman di blog jenis responsive karena responsive artinya yaa.. responnya cepat gitulah.

Kalau cara membuat kotak komentar facebook di blog dengan cara responsive artinya kalau kodenya di pasang di blog, gak bikin blog kita keberatan. Cara ini juga untuk mendukung sobat yang pake theme hasil download dan sudah responsive juga.

1. Masuk ke dasbord Blogspot atau blogger.

2. Klik bagian Template – Klik HTML

3. Cari Kode : </head> ( Cara cepat Menemukan kode tersebut : Tekan CTL + F masukan/ ketikan kode </head> pada kotak kecil yang muncul )

4. Copy pastekan Kode berikut tepat berada di atas kode : </head> tadi:

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

Note : kode : <div class=’comments’ id=’comments’> biasanya lebih dari satu, sobat letakan pada kode yang sama urutan kedua, atau silahkan di coba satu – satu. Kalau masih gak mau muncul barangkali di theme yang agan pake sudah terpasang kode komentar facebook, langkah yang harus di lakukan adalah hapus semua kode yang bertuliskan komentar facebook lalu terapkan cara yang telah ane bagikan ini.

Kalau sudah terpasang dengan baik, SAVE..lihat hasilnya.

Kedua: Cara Memasang Kotak Komentar Facebook Di blogspot biasa.

Langkah – langkahnya sebagai berikut :

1. Masuk ke akun blogger/ dasbord.

2. Pilih menu template –> Edit HTML.

3. Cari kode (CTRL+F) ini <div class=’comments’ id=’comments’>

4. kemudian letakkan kode di bawah ini tepat dibawah kode <div class=’comments’ id=’comments’> berikut kodenya :

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

Note: Silahkan Sobat Ganti Tulisan ID FACEBOOK dengan Id Facebook Sobat, cara menemukan atau mengetahui Id Facebook sendiri silahkan masuk ke : Developer facebook – kalau sudah dapat ID Facebook simpan juga karena siapa tau lain kali di butuhkan jadi gak perlu nyari lagi. Karena id facebook ga pernah berubah sampai saat ini.

Kalau sudah fix silahkan di SAVE.

Ketiga : Cara Cepat Memasang Kotak komentar facebook di blog dengan sedikit script :

1. Login – Dashboard – Template – Edit HTML

2. Cari (CRTL+F) kode <body>

3. Copy kode berikut ini dan simpan (paste) di bawah kode <body> berikut kodenya:

<div id=’fb-root’/>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>

4. Copy Pastekan kode berikut ini di bawah kode <div class=’comments’ id=’comments’>. Jika ada lebih dari satu kode yang sama pilih bagian kedua ya. Kodenya :

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=’margin-top:20px’>
<div class=’fb-comments’ data-num-posts=’5′ data-width=’600′ expr:data-href=’data:blog.url’/>
</div>
</b:if>

Note : tulisan angka 600 adalah lebar kotak facebook komentar dan angka 5 jumlah komentar yang di tampilkan di blog. Silahkan di sesuaikan dengan ukuran kotak postingan agar terlihat rapi.

Terakhir Silahkan SAVE – lihat hasilnya.

Oke sobat Bang Tohir yang Baik, Demikian Tutorial singkat cara membuat kotak komentar facebook di blog yang bisa ane bagikan kali ini, semoga bermanfaat ya.. Salam Sahabat Blogger.

Baca Juga: Cara Memasang Tombol Like And Share Media Sosial Di Blogger

LEAVE A REPLY

This site uses Akismet to reduce spam. Learn how your comment data is processed.