05 April 2017

Home » » Kolom Komentar Facebook Responsive

Kolom Komentar Facebook Responsive

1 comment
Salgetra|Sangat mudah untuk membuat kolom komentar facebook  di blog,apabila pihak facebook telah menyediakan plugin untuk kolom komentar  facebook di blog.Kali ini kita akan memodifikasi kolom komentar diblog agar menjadi responsive,pengunjung bisa mengakses blog dalam bentuk apapun dalam berkomentar diblog termaksud mengunakan smartphone.Cara pembuatannya hamper sama dengan komentar facebook yang lainnya,kita hanya menambah width (lebar) menjadi 100% dan menambah java script agar width (lebar) sesuai yang kita inginkan.Apabila kita tidak menambah java script ukuran width(lebar) tidak akan berkerja.
Berikut cara buat kolom komentar bersifat responsive:
1.Pertama langsung ke edit template,lalu pasang kode ini dibawah kode <head>
<meta content='FB Profil id' property='fb:admins'/>
<meta content='app id' property='fb:app_id'/>
Silahkan ganti FB profil id dengan id facebook kamu begitu juga dengan app id

2.Kemudian anda cari </head> untuk mempermudah gunakan ' crtl+f ',copy kode berikut lalu paste diatas </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='FB profil id' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
ganti FB profil id dengan id facebook anda

3.Masih di </head>,copy kode dibawah ini,diatas </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>

4.Langkah terakhir cari kode ' <div class='comments' id='comments'> ',kemudian copy kode berikut,dibawah kode ' <div class='comments' id='comments'> ' dan save tamplatenya lihat hasilnya cara memperkecil browsernya apa kolom komentarnya berkerja seperti apa yang kita inginkan
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='500'/></div>
</b:if>
num_posts='10' jumlah komentar yang ingin ditampilan sedangkan width;'500' adalah lebar kolom komentar facebooknya.
Demikian artikel ini,semoga bisa berguna buat anda. jangan lupa dishare dan komen.

1 comment:

  1. AnonymousMarch 21, 2022 at 8:38 PM

    Kolom Komentar Facebook Responsive ~ Salgetra >>>>> Download Now

    >>>>> Download Full

    Kolom Komentar Facebook Responsive ~ Salgetra >>>>> Download LINK

    >>>>> Download Now

    Kolom Komentar Facebook Responsive ~ Salgetra >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete

Label

Arsip

 
close