Member Avatar for saucy6969

Hi there
I am working on my company's festival website and I am trying to implement social media feeds on the right. Twitter worked a treat but facebook is giving me grief. I tried a page badge but it looked like hell.
I am currently using the Like Box but it only comes in transparent and it looks horrendously dark.
Is there any way to make the background white? or create a box with photoshop and put it behind the Like Box?

Any help would be greatly appreciated!!!

Click Here

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-like-box" data-href="https://www.facebook.com/pages/Newtown-Festival-Sydney/145245132226392" data-width="200" data-height="248" data-show-faces="false" data-colorscheme="light" data-stream="true" data-header="false"></div>
  • 3 Contributors
  • 3 Replies
  • 284 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by saucy6969

Dani AI

Generated

A quick note tying the thread together: the dark look comes from how Facebook renders the Like Box (it injects its own wrapper/iframe). 's inline background fix is the quickest way to get a white panel, and 's screenshot shows that it works. For a more maintainable and responsive approach, wrap the Facebook markup in a container and control presentation with CSS rather than scattering inline styles through the markup.

/* container that provides the white card */
.facebook-box {
  background: #fff;
  padding: 6px;
  width: 200px;               /* match plugin width */
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* make the fb wrapper/iframe blend with the white card */
.facebook-box .fb_iframe_widget,
.facebook-box .fb_iframe_widget span,
.facebook-box .fb_iframe_widget iframe {
  background: #fff !important;
  border: 0 !important;
}

/* small responsive tweak so the iframe scales inside its container */
.facebook-box .fb_iframe_widget iframe {
  width: 100% !important;
  max-width: 100%;
}

Notes and troubleshooting: the contents of a cross-origin iframe cannot be styled from the parent page — these rules affect only the iframe element and its wrapper. If any dark area remains it means the plugin's internal page is using its own background (that must be changed via the plugin's settings or a different embed approach). For long-term reliability prefer the wrapper+CSS method (keeps markup clean, easier to theme and make responsive) and check the current Facebook embed docs if behavior looks different later.

Recommended Answers

All 3 Replies

Member Avatar for vandepavert

You could add style="background-color: white;" just after <div class="fb-like-box fb_iframe_widget"

Member Avatar for JorgeM

Adding the backgound-color:white style to the div element that currently has this class: fb-like-box fb_iframe_widget, seems to be an option.

2567286d7dd1bfb0c34ac9939dfd7e6e

Member Avatar for saucy6969

vandepavert...worked like a charm! thank you so much! cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.