CODEWITHSUNDEEP
facebookfacebook-like
Nick
Nick

Reputation: 41

Like Box "Dark"color scheme not displaying properly

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.

Upvotes: 4

Views: 13263

Answers (4)

Ecksley
Ecksley

Reputation: 344

I know I'm late to this thread, but at the present time the dark color scheme appears broken so perhaps others might end up here looking for a solution.

Jimmy Sawczuk's example above still works but that is because he isn't showing the 'stream'. If you set the 'stream' property to true you can see a big problem or two.

<div>
<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=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:360px; height:258px;" allowTransparency="true"></iframe>
</div>

Link to demonstration

  1. The posts themselves are all backed in white... so much for a dark color scheme
  2. The account name next to the avatar is white text on a white background... So invisible.

Since the markup is in the iframe and I've run out of properties to customize I'm wondering what can be done?

Upvotes: 0

Artiphishle
Artiphishle

Reputation: 886

I seem to get a similar error.. I'm using the 'like' and the 'login' plugin.. when I'm logged everything is fine.. when I'm not, my 'like' button is light...

issue: 187studio.ch (top of the page)

Upvotes: 0

Mason
Mason

Reputation: 253

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>

Upvotes: 2

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

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.

Upvotes: 6

Related Questions