Force Facebook to Use Style

user_14635351 0
Viewed 57

I am trying to force a Facebook Embed to take up half the page. Normally in CSS, I would do width: 50%, but Facebook seems to cap the max pixels at 500, but I don't want that to happen. Is there a work-around for this?

Heres my current code:

iframe{
  width: 100%; /*should take up the entire container, instead takes up 500px*/
}
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Feliotfiskguitar&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

As you can see in the snippet, it should be taking up the entire page, but it instead takes up 500px.

I also tried using JQuery to calculate the width of the page and set the data-width attribute to the width in pixels, but again, it was capped at 500px.

Help appreciated.

Thanks

facebook css html javascript
1 Answers

Unfortunately, I don't think this is anything you can fix. I think this is a problem with Facebook, not with your code. If you absolutely need to fix this, I would suggest either setting up a custom div or other HTML elements and putting it all in an iframe, customizing it yourself and adding links that go to their Facebook page.

When I go to the link that is inside of the frame, it also does not give me the correct size.

Sorry we couldn't help, but I don't think there's any other way, and I'm not particularly familiar with Facebook's API anyway.

user_117833530
Related