How to make the Facebook Like Box responsive

Question

I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget  My theme is responsive  and I d like to get the like box to resize correctly  I found this tutorial but he says the way he is doing it  isn t  fully responsive  so I didn t know if there was a better way to do it

User · Answer

I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper"> in the fb_likebox.tpl.php.

Here's my CSS to style it:

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`

User · Answer

NOTE  Colin s solution didn t work for me  Facebook may have changed their markup  Using   should be more future-proof   Wrap the Like box with a div    lt div id  likebox-wrapper  gt       lt iframe src       gt  lt  iframe gt   lt  -- likebox code -- gt   lt  div gt    and add this to your css file    likebox-wrapper        width  100   important

User · Answer

Colin s example for me clashed with the like button  So I adapted it to only target the Like Box    fb-like-box   fb-like-box span   fb-like-box span iframe style    width  100   important      Tested in most modern browsers

User · Answer

NOTE  this answer is obsolete  See the community wiki answer below for an up-to-date solution      I found this Gist today and it works perfectly  https   gist github com 2571173   Many thanks to https   gist github com smeranda       Make the Facebook Like box responsive  fluid width  https   developers facebook com docs reference plugins like-box           This element holds injected scripts inside iframes that in  some cases may stretch layouts  So  we re just hiding it        fb-root       display  none        To fill the container and nothing else      fb iframe widget   fb iframe widget span   fb iframe widget span iframe style        width  100   important

User · Answer

None of the css trick worked for me  in my case the fb-like box was pulled right with  float right    However  what worked without any additional tricks is an IFRAME version of the button code  I e     lt iframe src    www facebook com plugins like php href               scrolling  no  frameborder  0           style  border none  overflow hidden  width 71px  height 21px            allowTransparency  true  gt   lt  iframe gt     Note custom width in style  and no need to include additional javascript

User · Answer

The answer you re looking for as of June  2013 can be found here   https   gist github com dineshcooper 2111366  It s accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget   Hope this helps

User · Answer

As of August 4 2015  the native facebook like box have a responsive code snippet available at Facebook Developers page   You can generate your responsive Facebook likebox here   https   developers facebook com docs plugins page-plugin  This is the best solution ever rather than hacking CSS

[css] How to make the Facebook Like Box responsive?

Examples related to css

Examples related to widget

Examples related to responsive-design