Loading...

Membuat Komentar Facebook Responsive

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

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:
komentar fb responsive
Komentar FB responsive
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 == &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='600'/></div>
</b:if>

4. 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>
5. 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.

/fa-thumbs-up/ RELATED$type=list-tab$hide=home

Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Membuat Komentar Facebook Responsive
Membuat Komentar Facebook Responsive
Cara membuat komentar Facebook keren di bawah postingan, bikin widget komentar fb responsive keren, Komentar Fb di atas komentar blogger, Komentar Facebook berdampingan dengan Blogger, Comment Facebook responsive...
https://3.bp.blogspot.com/-O-HCN72Kt7o/Uw8bAasa_1I/AAAAAAAAKoA/Wh0lReRvagw/s1600/fb+responsive.jpeg
https://3.bp.blogspot.com/-O-HCN72Kt7o/Uw8bAasa_1I/AAAAAAAAKoA/Wh0lReRvagw/s72-c/fb+responsive.jpeg
Bangiz
https://bangiz.blogspot.com/2014/02/Komentar-FB-Responsive.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2014/02/Komentar-FB-Responsive.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy