CODEWITHSUNDEEP
htmlcssfacebookfacebook-like
Offir
Offir

Reputation: 3491

Facebook page embed iframe doesn't fill container width

I added an iframe of wikipedia to demonstrate the problem I have.
The Wiki iframe is displayed correctly like it suppose to, but the facebook iframe isn't.

enter image description here enter image description here

HTML:

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS:

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

As you can see I am asking facebook an iframe with width of 450px and in the images attached the width of the emulator is 375px, but still the fb iframe doesn't fill it container like the wikipedia iframe does.

How can I make fb iframe to fill it container?

Upvotes: 11

Views: 22525

Answers (8)

Jānis Seržants
Jānis Seržants

Reputation: 29

You can always zoom iframe with scale:

iframe {
    transform: scale(1.3)
}

Upvotes: 0

Jan K
Jan K

Reputation: 53

What about a jQuery solution?

jQuery(window).on("load resize", function () {
  jQuery('iframe[src*="facebook.com"]').each(function () {
    /* get width of parent element */
    var width = Math.round(jQuery(this).parent().width());
    if (width > 500) {
      width = 500;
    } else if (width < 180) {
      width = 180;
    }

    /* replace width value in iframe src */
    var src = new URL(jQuery(this).attr("src"));
    src.searchParams.set("width", width);

    /* append new width */
    jQuery(this).attr("src", src);
    jQuery(this).attr("width", width);
  });
});

This script gets the width of the parent element and adjusts the iframe accordingly.

Upvotes: 3

Offir
Offir

Reputation: 3491

After asking in the facebook bug platform I got this answer from them which helped to solve this issue once and for all:

As already answered by other people in stackoverflow, according to the documentation, https://developers.facebook.com/docs/plugins/page-plugin/, you can specify the width for the plugin, however, "100%" is not something supported.

Quotes from facebook documantion are not helping unless you refernce them against an error in the code, the documentation says as follows:

The pixel width of the plugin. Min. is 180 & Max. is 500

It's not saying anything about not supporting 100% width of the parent container!
The only answer that was close to figure it out was Alon's and that's why he got the bounty.

So eventually this is the code I ended up with:

HTML:

 <div class="iframe-fb-container">
   <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
 </div>

CSS:

.iframe-fb-container {
    text-align: center;
    width:400px;
    height:700px;
    display:inline-block;
}

.iframe-fb {
    width: 400px;
    height: 700px;
    overflow: hidden;
}

I hope this answer will help someone in the future :)

Upvotes: 1

Mak0619
Mak0619

Reputation: 660

Because _2p3a and uiScaledImageContainer _2zfr are taking width: 450px; that's why facebook iframe not showing correctly.

Upvotes: 0

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Facebook's Page Plugin it's not working as a responsive container, you have to add width from minimum 180px to maximum 500px as per the documentation.

enter image description here

You can also look at some other answers, I hope it'll help you out. Thanks

Responsive width Facebook Page Plugin

Upvotes: 1

Samuel Cooper
Samuel Cooper

Reputation: 552

Facebook states on the Page Plugin site

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout

and

No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

So I would think your best option would be to fill the width of the parent as much as possible (up to the 500px limit), and then centre it in the parent. If you try over riding the CSS set by facebook, it starts to display incorrectly, such as the posts not filling the timeline.

Upvotes: 2

Alon Shmiel
Alon Shmiel

Reputation: 7121

You can't make it 100% in a normal way.

This is your iframe src:

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

Note that there is parameter: width=450px.

It set the width of the iframe content to be 450px.

According to Facebook Plugin documentation:

The pixel width of the plugin. Min. is 180 & Max. is 500.

So the maximum width Facebook can get is 500.

Upvotes: 4

Sugam Parajuli
Sugam Parajuli

Reputation: 185

Please give the iframe width of 100%. :)

iframe{
  width: 100% !important  //important if not working without it..
}

Upvotes: -3

Related Questions