Cara Mudah Buat Facebook Komentar Pada Blog Blogspot

Senang jumpa lagi sahabat BlogTeknisi, malam ini saya ingin berbagi tentang cara membuat facebook komentar di blog. Bagi sahabat yang sudah expert saya kira bukan masalah lagi, tapi ada baiknya kita postingkan di blog agar ilmunya tidak terlupakan. Pada template dasar fitur facebook komentar ini tidak akan kita jumpai, jadi solusinya adalah dengan menambahkan sendiri fitur ini ke dalam blog kita.

Cara Mudah Buat Facebook Komentar Pada Blog

Memasang facebook komentar di blog menjadi satu tips untuk meningkatkan traffic pengunjung blog kita. Misal, jika ada yang komentar pada postingan kita melalui facebook komentar ini maka secara otomatis akan terbagi di akun facebook yang komentar tadi. Jadi, saat itu sudah masuk facebook maka kemungkinan besar yang lainnya ikut melihat komentar tersebut dan secara tidak langsung mengundang mereka untuk melihat postingan kita. 

Berikut langkah-langkah memasang facebook komentar pada blog kita :

PADA TEMPLATE BIASA :

1. Masuk ke akun blogger.
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'>

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

5. Silahkan cari dan ubah kata "ID FACEBOOK ANDA" dengan id facebook anda. Dan lihat hasilnya.

PADA TEMPLATE RESPONSIVE

Pertama-tama anda perlu menambahkan kode java script ini:

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

Copy dan Paste kode tadi di atas kode </head>

Langkah berikutnya adalah memasang kode html. Letakan kode berikut ini dibawah kode related post atau jika sahabat kebingungan silahkan cari kode <div class='comments' id='comments'>, jika ada lebih dari 1 kode silahkan coba satu persatu. Kode facebook komentarnya seperti ini:

HTML<b:if cond="data:blog.pageType == &quot;item&quot;">
<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>

Demianlah Cara Mudah Buat Facebook Komentar Pada Blog/Blogspot semoga bisa bemanfaat buat sahabat BlogTeknisi. [BT]

Bagikan Artikel ini