HTML5 Like Box Broken

13
votes

I am having the following problems; the height is not scaling correctly, the background is no longer transparent, the border is the wrong color, the bottom of the box is cut off, the text and background is the same color on the 'Dark' setting. This is occurring on every site that I have the 'Like Box' implemented on.

These can all be reproduced on the Like Box - Developers Page https://developers.facebook.com/docs/reference/plugins/like-box/ Try the following settings:

Width 400

Height 600 (the box will not scale) (if you leave it at default and turn of Show Faces the bottom is cut off)

Show Faces: On

Color Scheme: Dark

Show Stream: On

Border Color: #000 (the border will not change colors)

Show Faces: Off

(You will notice the text and background is the same color (the background is no longer transparent)) This all seems to have begun at midnight Wednesday EST following updates and I believe is a result of them trying to fix the issue of images being stretched in the feed.

1
facebookfacebook-likefacebook-likebox
developers.facebook.com/bugs/128437833979988 describes one issue, have you subscribed to that bug? - Igy
These steps did not replicate the problem for me - Tommy Crush
@Igy, I have no subscribe button appearing, nor can I follow or create a new bug report from my end. I am aware of this existing bug report and can emulate the posters results on my end. - Robert Mroczka
Update... If I log out of facebook and clear my cookies, the like box renders properly. The minute I log into Facebook ALL current browsers stop rendering the Like Box properly. - Robert Mroczka
@RobertMroczka I have an FB like box on my site and I am facing exactly the same issue. When I open my site in incognito mode in Chrome it renders perfectly but when I am logged in to FB, it breaks. - Irfanullah Jan

1 Answers

2
votes

This worked for me:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=400&amp;height=558&amp;show_faces=true&amp;colorscheme=dark&amp;stream=true&amp;border_color=%23000000&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:558px;" allowTransparency="true"></iframe>

Just keep in mind you need to add few lines in <head> tag, else you will not see proper results

<link rel="alternate" media="handheld" href="https://developers.facebook.com/docs/reference/plugins/like-box/" />

<link rel="canonical" href="https://developers.facebook.com/docs/reference/plugins/like-box/" />

<meta property="og:url" content="http://developers.facebook.com/docs/reference/plugins/like-box/" />

You may tweak with the values after reading FB API documentation.