How to style a Facebook Like Box with CSS

Injecting a CSS file into fb:fan stopped working just recently. Here's an alternative solution to freely customize the layout of your Facebook Fan Page widget with CSS.

Standard layout options of the Facebook Like Box are very limited. However, there is a popular solution described on Stackoverflow on how to load an own CSS stylesheet into the widget, allowing free customization of each element. According to Facebook's deprecation policy, this solution should have stopped working on June 1, 2012. Well, it stopped working two days ago, on January 25, 2013. Yet, here's another approach for applying your own CSS style to the Facebook Like Box.

Update: One month later, as of February 26, 2013, also this approach for customizing the Facebook Like Box fails. Facebook aims at providing a consistent user experience and has removed all available options for injecting a custom CSS stylesheet into this widget.

As described at the end of this post, some limited customization may still be achieved by wrapping the whole widget into <div> containers. To see what's currently possible, simply take a look at the sidebar of this blog post.

Fill in the gaps (FAN_PAGE_URL and CSS_FILE_URL) in the following iframe snippet and place the code on your page where you want it to be shown:

<iframe style="height: 250px; width: 250px;" src=" href=[ FAN_PAGE_URL ]&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;css=[ CSS_FILE_URL ]"></iframe>

Facebook Like BoxOn Pixabay, we have adjusted some background colors and we've also removed our Facebook profile image in the header of the widget. You may see the Like Box in action right here in the sidebar of our blog. And the corresponding CSS file looks like this:

.full_widget { height: 236px!important; border: 0!important; background: #fafafa!important; }
.connect_top { background: #e3eaf3!important; padding: 8px 10px!important; }
.profileimage { display: none; }


It's imperative to use a publicly accessible CSS file. Localhost won't work! Also, Facebook caches stylesheets for a long time on their end. Thus, if you modify anything in your CSS file, make sure to also change its URL. Adding a get parameter like "?v=123" to its path in the snippet suffices.

One more tip: Placing the iframe directly inside the body of your HTML code works fine as long as Facebook doesn't get the hiccups - which happens surprisingly often. To prevent browsers from waiting until the iframe has loaded in such a case, we insert the snippet dynamically via JavaScript (jQuery) after the actual content of the page has been rendered. That's basically what the original Facebook script does as well.

<!-- container div to be filled via JavaScript with the Facebook iframe -->
<div id="fb_like"></div>

<!-- place before the </body> tag and after loading jQuery -->
    $('#fb_like').html('<iframe [...]></iframe>');</script>

<!-- or without jQuery -->
    document.getElementById('fb_like').innerHTML = '<iframe [...]></iframe>';

Nonetheless, this method of applying a custom stylesheet may to stop working as well - sooner or later.

Update: Alas, the above described workaround has stopped working in February, 2013. However, some basic custom style options are still available. As shown on Digital Inspiration, by wrapping the whole Like widget into <div> containers and making use of the CSS property "overflow: hidden", elements at each side of the widget may be cut off and an individual background color may be set.

To get started, create a new widget at Facebook Developers and make sure to deselect the "Show Border" option. You'll probably also want to disable the widget's header and stream. Here's how we currently include the widget on our blog:

<div style="height:212px;width:240px;overflow:hidden"> 
    <div class="fb-like-box" data-href="" data-width="252" data-height="212" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" data-connections="10"></div>

In June, 2013, Facebook introduced a minimum width of 292px. That's broader than our sidebar, and so, we simply cut off the right side of the widget accordingly. Pretty harmless and it still looks okay. That's it:-)


11 comments Sign in to leave a comment.
Simon   1 year ago
You're only changing the container element, not the actual content. So, you still cannot choose another font for the messages inside. If I'm wrong, please let us know :-)
johanna1   1 year ago
Hi Simon, Well actually it is possible to style the FB Like Box. I found a solution here: Just add the css to your css file. For instance: .fb-like-box { background:#fafafa; color: #fff; width:250px; padding:0 0px; margin:10px 0; border:solid 1px #c7c7c7; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30); box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30); }
Simon   1 year ago
Unfortunately, that's impossible. Facebook does not allow any tempering inside the widget - any more :-/
johanna1   1 year ago
Hi Simon, Is it also possible to add css for the font of the messages inside the FB Like Box? I tried adding several classes to my css, but so far it isn't working.
thad   1 year ago
Thanks for this information - I've ended up doing what you're doing and that is a whole lot better than what I had before. Keep up the good work.
Simon   1 year ago
Well, Facebook aims to provide a standardized widget that cannot be tempered with. All available display options are described here: Apart from that, you can only cut from the outside and play around with your backgroudn color. Unfortunately, I don't see a way for accessing styles inside the widget, neither with CSS nor JavaScript.
Dan75   1 year ago
Thanks SImon - Another question - I have noticed just over the last week or two that the images displayed inside the like box from the feed now do not scale to the size of the box. Is there any way this can be corrected?
Simon   1 year ago
Unfortunately, as described at the beginning of this blog post, the Facebook widget cannot be styled any more. You may cut off borders or - and that might be a possibility for you - you could cut off the whole header section including link, profile image, and like button. After that, you should add a standard Facebook like button pointing to your Facebook page, so that users may still become a fan ... just a thought.
Dan75   1 year ago
Is there any way to remove my profile image from the FB like box without css?
Simon   2 years ago
Hi Jeffrey, thanks for your tipp. That's what we currently do here on Pixabay. It's also what's described in Digital Inspiration's post (link above).
+1 more
Author: Simon
Created: 2 years ago
Topics: Web Design, Web Development