Cara Memasang Komentar Facebook Di Blogger Terbaru
Cara Memasang Komentar Facebook Di Blogger
Anda pasti telah berkunjung ke blog - blog atau website yang memasang komentar facebook ini. Untuk cara membuat kotak komentar Facebook ini cukup mudah dan agar blog Anda lebih terkonektivitas dengan Facebook. Fungsinya Juga agar para pengunjung blog lebih mudah berkomentar menggunakan akun fb nya :)
Contohnya :
Di Kesempatan Malam Ini AOL akan Membagikan 2 Cara Memasang Komentar Fb Di Blog. Yang Pertama Memasang Komentar FB yang Template Nya Biasa Kedua Yang Template Nya RESPONSIVE.
Langsung Saja Caranya :
1. Template Biasa
Masuk keakun blogger
- Pilih Menu Template Lalu Edit Html
- Cari Kode <div class='comments' id='comments'> Cara Mencari nya klik (CTRL+F)
- Kemudian Letakkan Kode Berikut Di bawah kode <div class='comments' id='comments'>
- Jangan Lupa ID FACEBOOK KAMU Diganti dgn Id fb kmu:)
<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>
2. Template Responsive
- Copy dan Paste kode berikut di atas </head>
//<![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>
- Langkah berikutnya adalah memasang kode html. Letakan kode berikut ini dibawah kode untuk related post atau jika sobat bingung silahkan cari kode <div class='comments' id='comments'>, jika ada lebih dari 1 kode silahkan coba satu persatu.
<b:if cond="data:blog.pageType == "item"">
<h4>Post Comment</h4>
<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='5' width='500'/></div>
</b:if>
Cara Memasang Facebook komentar Bag.3
1. Dashboard >> Template >>Edit HTML
2. Cari (CRTL+F) kode <body>
3. Copy kode berikut ini dan simpan (paste) di bawah kode <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
4. Copy kode berikut ini dan simpan (Paste) tepat di bawah kode <div class='comments' id='comments'>. Jika ada lebih dari 1 kode di tempalte blog Anda, simpan di bawah kode yang kedua.
<b:if cond='data:blog.pageType == "item"'>
<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:
Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.
5. Save Template dan selesai.
Bagaimana sobat mudah bukan?, memang cara memasang komentar facebook di template blog ada bermacam-macam kodenya, tinggal sesuaikan saja dengan template blog yang anda gunakan. Semoga tutorial cara memasang komentar facebook dan komentar facebook responsive ini mudah di pahami, dan selamat mencoba.
Nice Blog , Btw Cara bikin Label di bagian Home Blog kamu itu gimana ya :D
ReplyDeletewww.andelaice.org
thx;) yg mana mas?? bisia screenshoot lbih jlas nya? :)
Deleteyg ini http://postimg.org/image/j598xqdb7/
Deleteohhh, itu udah ada dari template nya mas :D
DeleteMas! saya mau tanya ne...
ReplyDeletesaya pake template blogspot versi gratisan, trus pasang fb comment dan berhasil, bisa kirim komentar.
Tapi klo saya ganti alamat blog dari blogspot.com ke domain tld, comment fb.nya gk bisa buat komentar. setiap x kiring komentar dapat notifikasi "Message Failed". Bisa bantu saya?
Terima Kasih!!