Facebook Like Button renders 1000px*1000px after pressing Back on Browser on Chrome and blocks page content

Question

I implemented html5 version of the like button on the header of my page. once i navigate to another page and press the back button on the browser the FB button renders the iframe the size of 1000px * 1000px and masks the page content.

any solutions for this ? is this a known issue?

Zennie

Answer 1

I can confirm this is happening for myself as well across multiple sites.

Facebook is aware of the issue which may take some time to fix according to https://developers.facebook.com/x/bugs/663421210369743/

In the short-term, many other developers seems to be suggesting to target the iframe specifically through css (or timeout javascript call) to force the height back to about 20px.

When using css, ensure you use !important to override the style attribute that ends up on the iframe from facebook.

Shillong

Answer 2

I know this is an old post but it's still happening.

Add this inline to the code facebook gives you:

data-height="30px" data-width="130px"

And this to the CSS

.fb-like { width: 130px !important; }

Of course, you can change the width to whatever you want.

So your code should look like this (where XX is replaced with your parameters):

<div class="fb-like" data-href="XX" data-send="XX" data-layout="XX" data-show-faces="XX" data-height="30px" data-width="130px">

This is only a temporary solution until it is fixed as the facebook button disappears after a minute or so.

Opaline

Answer 3

Probably not the best solution out there but adding the following css could work for now:

.fb-like iframe { width: 500px!important; height: 50px!important; }

Westfalen

Answer 4

For me this is happening when the facebook like button is wrapped in "position relative" element with "z-index" higher then the content wrapper.

Check the position and the z-index of your elements.

Frigging