Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Like Box Broken

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.

like image 366
Robert Mroczka Avatar asked Dec 09 '12 17:12

Robert Mroczka


Video Answer


1 Answers

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.

like image 172
MarmiK Avatar answered Dec 19 '22 15:12

MarmiK