Artikel ini menjelaskan bagaimana cara membuat facebook like box dan facebook comment menjadi responsive. Metode yang digunakanada dua bisa menggunkan CSS atau menggunakan jQuery.

Membuat Facebook Like Box dan Comment Responsive - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana cara membuat facebook like box dan facebook comment menjadi responsive. Metode yang digunakanada dua bisa menggunkan CSS atau menggunakan jQuery.

Membuat Facebook Like Box dan Comment Responsive

Membuat Facebook Like Box dan Comment Responsive

Facebook merupakan social media yang memiliki jumlah pengguna yang sangat banyak. Di Indonesia saja 47% dari pengguna internet memiliki akun facebook. Selain social media facebook juga memberikan banyak tools bagi pengguna blog. Diantaranya fasilita seperti facebook like box, facebook button, facebook comment.
Nah bagi anda pengguna facebook dan juga memasang facebook like box atau pun facebook comment diblog anda mungkin tertarik dengan tips yang satu ini. Tipsnya yang saya berikan ini yaitu bagaimana membuat keduanya menjadi responsive. Hal ini sangat cocok bagi anda pengguna template yang responsive.
Dari hasil pencarian dan percobaan yang saya lakukan saya menemukan dua metode untuk menjadikannya responsive. Yaitu dengan cara menggunakan CSS dan dengan cara jQuery. Nah bagi anda yang tertarik bisa mengikuti cara berikut.

Metode CSS

Metode dengan menggunakan CSS dapat dilakukan dengan menambahkan kode CSS berikut kedalam template blogspot anda:

Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

Metode jQuery

Metode yang satu ini terbilang lebih rumit karena harus menggunakan jQuery. Sehingga untuk menerapkannya setidaknya blog anda telah ada jQuery librarynya.
Pada umumnya jika anda membuat facebook like dan juga facebook comment (HTML5) akan ada dua kotak untuk dicopy kodenya.
Kode yang pertama adalah kode javascriptnya atau disebut dengan JavaScript SDK. Kode ini sebaiknya hanya satu kali diletakkan. Dan dianjurkan diletakkan setelah tag <body>. Kalau tidak salah bentuk kodenya seperti ini:
<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=ID Aplikasi Facebook Anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Maksud dari kode ini yaitu akan mencari tag script yang pertama dan meletakkan kode script dengan id facebook-jssdk setelahnya. Sehingga kode seperti diatas dapat diganti dengan kode berikut dan meletakkannya setelah tag <body>.
<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=ID Aplikasi Facebook Anda"></script>

Facebook Like Box

Kode yang kedua dari FB like box akan seperti ini:
<div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Kode diatas adalah tempat dimunculkannya like box. Nilai default like box (profile,stream, dan header muncul). Untuk merubahnya silahkan ganti dengan nilai true diganti dengan false. Misal ingin menghilangkan headernya maka dirubah menjadi data-header="false".
Karena kita akan membuat menjadi responsive maka harus ditambahkan sedikit kode html dan juga jQuery seperti ini.
<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL Facebook Page Anda"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Facebook Comment

Seperti halnya pada like box, pada FB comment bentuk kode keduanya kurang lebih seperti ini (untuk blogger):
<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>
Hampir sama yang kita lakukan pada like box, tapi pada fb comment ada sedikit tambahan kode Javascript. Sehingga kodenya akan seperti ini.
<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<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+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>

Sekian.
Semoga dapat membantu serta dimengerti.
Sukses selalu bagi anda.
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

27 comments:

  1. blm ada demonya nieh ...

    BalasHapus
  2. mas tolong share cara membuat sharepost seperti yang ada di themeblog ini http://rbsimple-ivythemes.blogspot.com/2012/07/complete-sample-post.html

    BalasHapus
  3. akhirnya dishare juga.. :d
    thanks mass... :)

    BalasHapus
  4. gan supaya color scheme nya dark gimana sih ??

    BalasHapus
  5. mas mau nanya.. kalo gunanya CSS itu apa yaah.. -_-
    http://herbalarjawinangun.blogspot.com/

    BalasHapus
  6. Aku sudah lama banget pingin menerapkan FB comment ke blog aku, tetapi gagal terus ya, dengan cara di atas juga belum berhasil, kira-kira kesalahannya dimana ya, apa template blog aku belum suport ama FB plugin ya kak, tolong bantuannya ?

    BalasHapus
    Balasan
    1. klo template yg tidk support tdk mungkin..
      kalau di blog anda bisa terpasang facebook like box maka fb comment pun bisa..

      Hapus
  7. sekarang lagi jamannya responsive :D

    [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

    BalasHapus
  8. yg gue suka sama mkr-site ini tutorialnya responsive, bagus buat blog dan jaman skrg :D

    BalasHapus
  9. om meta content keywordnya salah tuh bukan jky48 tapi jkt48 :>)

    BalasHapus
  10. keren mas, terimakasih banyk sudah berbagi, mudah2an ana faham tntng responsive dengan banyak menyimak artikel mas x lagi terimakasih banyak

    BalasHapus
  11. aduuh, aku kok malah pusing ya sob, kepengen bisa, tp utak atik kodenya ituloh yg bingung..

    BalasHapus
  12. Saya tertarik untuk mencobanya setelah menyimak tutorial ini, walaupun pengetahuan coding pas-pasan tetap berusaha untuk mengerti :d

    BalasHapus
  13. lagi lagi gak ada demonya! :-t

    BalasHapus
    Balasan
    1. ini demonya mas kurniawan
      http://res.ponsive.com/?resize=srv-idlecreative.blogspot.com%2F2013%2F04%2Fone-piece-movie-10-strong-world.html%3Fm%3D1&iphone=on&ipad=on&android=on

      Hapus
  14. Mau coba yang mana nih..?? :-?

    BalasHapus
  15. Makasih mas tutorialnya..

    dari kemarin udah berusaha buatnya responsive>>

    :))

    BalasHapus
  16. akhirnya sudah bisa. terima kasih bro

    BalasHapus
  17. terima kasih tutorialnya mas. Sudah bisa

    BalasHapus
  18. kaget tadi tampilan blog njenengan hancur kang, ternyata konksi yg disconnect hehe

    BalasHapus
  19. pas mau gunain ini kang, testimonial saya pake facebook di set manual pake persen error terus. matur nuwunn

    BalasHapus
  20. masih bingung n belum bisa :(

    BalasHapus
  21. selalu saya lupa untuk mengantinya klo sudah ganti template, untung ada info diatas (y)

    BalasHapus
  22. makasih om...
    inin praktek yah.... ^^

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP