Facebook plugin social, iframe does not adapt width to its parent

Question

I'm trying to put a Facebook social plugin <iframe> in this layout , but the problem is the content of this <iframe> , its not adapting to its parent width.

This is the <iframe> code:

<iframe id="fb-page" src="https://www.facebook.com/plugins/page.php?
   href=https%3A%2F%2Fwww.facebook.com%2F505180683015806&tabs=timeline%2C%20messages&
   height=500&
   small_header=true&
   adapt_container_width=true&
   hide_cover=false&
   show_facepile=false" 
height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

*Code altered just for better presentation of PHP parameters.

As you can see, adapt_container_width is set to true , but nothing change, no matter the size of wrapper on page loading, always get width if passed in parameter or set width 340px, which is Facebook default value.

What was tested:

• Specify width value as a PHP parameter, results in a content with absolute width and can cause some overflow content to be hidden.

• Specify width with value '0' as a PHP parameter, results in a content with width 0px.

• Specify width with value '100%25' as a PHP parameter, results in a blank frame.

• Specify width with 100% on iframe element, don't change content width that will be always 340px (Facebook default value), or value defined via PHP parameter.

You can check with this fully functional jsfiddle , that already contain iframe code and HTML layout.

What I expect:

A way to make <iframe> content use 90% of its parent, instead of specify a absolute width and kill the responsiveness. And just use the <iframe> code that Facebook provide as option to render its content.

Thanks in advance.

Answer 1

Same for me. The only solution I came up with is:

.fb-likebox {
    max-width: 288px;
    overflow: hidden;
    width: 288px;
}

with overflow:hidden at least doesn't make it look broken, but yes it does hide from the box.