Membuat Komentar Facebook Responsive

SI TUKANG NGULIK INTERNET - Setelah dulu pernah membahas tentang cara membuat komentar Facebook dan Blogger berdampingan, berikut ini Bangiz akan membahas tentang cara membuat komentar Facebook responsive. Responsive disini bisa dikatakan sebuah teknik yang digunakan supaya layout bisa menyesuaikan diri dengan alat atau ukuran yang diinginkan. Untuk mengetahui responsive atau tidaknya layout yang kita lihat yaitu tinggal minimize saja browsernya ke ukuran yang diinginkan.

Komentar FB responsive

Teknik responsive ini tentunya sangat cocok untuk Anda yang menggunakan template responsive. Dengan begitu tidak akan muncul scroll ketika layout berada pada layar yang lebih kecil dan juga kelihatannya lebih enak dipandang mata. Berikut adalah langkah-langkah yang perlu dilakukan:

1. Masuk dasbor Blogger > Template > Edit HTML

2. Copy-paste kode berikut dibawah kode <head>

<meta content='FB Profile ID' property='fb:admins'/>
<meta content='App ID' property='fb:app_id'/>

Ganti Profile ID dan App ID dengan yang Anda miliki

3. Cari kode berikut (gunakan Ctrl+F untuk memudahkan)

<div class='post-footer-line post-footer-line-3'/>

Copy-Paste kode berikut di bawah atau sebelum kode tadi

<b:if cond='data:blog.pageType == "item"'>
<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='600'/></div>
</b:if>

3. Cari kode </head> (gunakan Ctrl+F untuk memudahkan)
Copy-Paste kode berikut di atas atau sebelum kode </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. Simpan template dan lihat hasilnya.

Sekian tutorial Blogging tentang cara membuat widget komentar Facebook menjadi responsive. Jika berkenan silahkan bantu share tulisan ini melalui jejaring sosial dan follow Bangiz untuk mendapatkan artikel terbaru.

Membuat Komentar Facebook Responsive

0 Response to "Membuat Komentar Facebook Responsive"

Post a Comment