jqueryhtmlcssiframefacebook-iframe

Weird iframe width bug on facebook embed code

I am trying to embed facebook reviews on my website, but the width of the box doesn't appear right. width: 286px, it Loads the default 350px;

1

Interestingly when I open the Developer Console and reload the page, the iframe loads perfectly with the exact size it should be.

I also tried to write jquery script that reloads the iframe after page is rendered but with no success.

Does anyone have an idea why this is happening and how I could fix it? Thank you

                            <div class="container">
                              <div class="row">
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" width="286px" height="215px" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fkirsty.armstrong.904%2Fposts%2F2292031390876127&width=286" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Faneesa.aidroos.3%2Fposts%2F386560588794579&width=286" width="286px" height="215px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <div class="card" style="width: 286px; height:215px;">
                                          <iframe onload="reloadOnce(this)" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Falinbush%2Fposts%2F2343483609028644&width=286" width="286px" height="215px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                    </div>

                                </div>
                              </div>
                            </div>

2

Solution

  • Facebook requires minimum 350px width.