Login/Register
HTML5 Like Box Broken
Asked Answered
facebookfacebook-likefacebook-likebox
H

1

13

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.

Haemocyte answered 9/12, 2012 at 17:28 Comment(8)
developers.facebook.com/bugs/128437833979988 describes one issue, have you subscribed to that bug? – Doughman
These steps did not replicate the problem for me – Abm
@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. – Haemocyte
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. – Haemocyte
@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. – Latoyalatoye
I still cant seem to get any support on this issue. I see that someone is has reported a similar issue on the developers bug page, but can't post my own report, follow the existing report or show that I can reproduce the issue... I'm trying everything I can to make this known, but Facebook is making it almost impossible to do. This is occurring on 5 of the websites I support and two other websites that weren't built by me, but another web design company. – Haemocyte
@RobertMroczka, can you paste the code you are using? The demo on the FB Developers page is adding its own background to the plug-in container (via the class dark_background), but if you copy the code as given in the "Get Code" box, you should be fine. I suspect you may have copied the source from the page directly, instead of from the code they give you in the modal popup window.. – Biped
Can you post fiddle on this.. ?? I believe in practical :) – Cyclopean
C
2

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.

Cyclopean answered 13/3, 2013 at 12:39 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.