Like Box "Dark"color scheme not displaying properly

Question

Trying to put the Dark colored Like Box on my website, everything seems to function properly but the color looks like its the light scheme, what's the problem?

Here's the code I used:

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

I tried both the iframe and html5 codes.

Another problem is sometimes only a couple faces show in the box and other times it displays max faces.

Solution 1

The dark color scheme is rendering properly, but by design it doesn't have a background (it's transparent). Put it in front of a div with the background you want, as demonstrated here.

Solution 2

The developer button wizard wasn't working for me (using Chrome). Not sure why, but I found the data element that changes the colorscheme from light to dark. You can manually add the following and it will work just fine.

data-colorscheme="dark"

Example:

<div class="fb-like" data-href="http://www.nike.com" data-send="false" data-colorscheme="dark" data-width="450" data-show-faces="false"></div>