How to make Facebook Like Box responsive?

Question

I use the code in the form of Facebook, for example, in the sidebar, pasting the Facebook code into a text widget. My theme is responsive, and I would like the box as a box to resize correctly. I found this tutorial , but it says that it does it, is not "completely responsive", so I did not know if there is a better way to do this.

Answer 1

NOTE: this answer is deprecated. See the community wiki answer below for an up-to-date solution.

---

I found this Gist today and it works great: https://gist.github.com/2571173

(Many thanks 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; } 

Answer 2

Colin example for me came across a similar button. Therefore, I adapted it to focus only on Like Box.

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

Tested in most modern browsers.

Answer 3

NOTE. Colin solution does not work for me. Facebook may have changed the markup. Use * should be more reliable in the future.

Wrap the Like box with a div:

 <div id="likebox-wrapper"> <iframe src="..."></iframe> <!-- likebox code --> </div> 

and add this to your css file:

 #likebox-wrapper * { width: 100% !important; } 

Answer 4

As of August 4, 2015, there is a responsive code snippet available on the Facebook developers page on a native framework similar to a block.

Here you can create your own responsive Facebook.

https://developers.facebook.com/docs/plugins/page-plugin

This is the best solution, not CSS hacking.

Answer 5

The answer you are looking for as of June 2013 can be found here:

https://gist.github.com/dineshcooper/2111366

Executed using jQuery to overwrite the internal HTML of the parent container that contains the facebook widget.

Hope this helps!

Answer 6

None of the css tricks worked for me (in my case, the fb-like box was pulled directly using "float: right"). However, what worked without any extra tricks is the IFRAME button code version. I.e:.

 <iframe src="//www.facebook.com/plugins/like.php?href=..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:71px; height:21px;" allowTransparency="true"> </iframe> 

(Pay attention to the custom width in the style and do not need to include additional javascript.)

Answer 7

I tried to do this on Drupal 7 with the "fb_likebox" module ( https://drupal.org/project/fb_likebox ). To be responsive. Turns out I had to write my own version of the Contrib module and change the width setting. (the default height parameter does not matter to me). As soon as I removed the width, I added <div id="likebox-wrapper"> to fb_likebox.tpl.php.

Here is 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;}` 

Answer 8

You can see the facebook way to create adaptive width.

It is alleged that:

• The plugin will determine its width when loading the page
• He will not respond to changes in the box after loading the page.

If you want to adjust the width of the plugin when you resize the window, you need to manually update the plugin.

So here is a solution that works:

HTML

  <div class="fb-page"> <!-- Iframe code --> </div> 

Javascript

  (function($){ $(window).on('resize', function() { $(".fb-page").attr("data-width", $('.fb-column').width()).attr("data-height", $('.fb-column').height()); if (typeof FB !== 'undefined' ) { FB.XFBML.parse(); } }); })(jQuery);