Pixabay Blog


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="http://www.connect.facebook.com/widgets/fan.php? 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 -->
<script>
    $('#fb_like').html('<iframe [...]></iframe>');</script>
</script>

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

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="http://www.facebook.com/pixabay" data-width="252" data-height="212" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" data-connections="10"></div>
</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 :-)

, Jan. 27, 2013  

Comments

Translate
Simon  02/11/2014
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 :-)
Translate
johanna1  02/11/2014
Hi Simon, Well actually it is possible to style the FB Like Box. I found a solution here: http://www.basicwp.com/facebook-like-box-border-background-css-styles/ 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); }
Translate
Simon  02/11/2014
Unfortunately, that's impossible. Facebook does not allow any tempering inside the widget - any more :-/
Translate
johanna1  02/11/2014
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.
Translate
thad  06/29/2013
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.
Translate
Simon  06/10/2013
Well, Facebook aims to provide a standardized widget that cannot be tempered with. All available display options are described here: https://developers.facebook.com/docs/reference/plugins/like-box/ 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.
Translate
Dan75  06/10/2013
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?
Translate
Simon  06/10/2013
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.
Translate
Dan75  06/09/2013
Is there any way to remove my profile image from the FB like box without css?
Translate
Simon  04/15/2013
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 ...

Free Software by Pixabay on GitHub

In the spirit of Pixabay, we've opened a GitHub repository under which we are going to release useful pieces of our platform code as free software.

Draggable jQuery Colorbox

Four very simple and efficient ways of rendering your jQuery Colorbox window draggable - with no dependencies and no overhead.

Pixabay WordPress Plugin Version 2

Our new Pixabay Images WordPress plugin comes with a bunch of great new features, including larger images, language settings and modernized layout.

Tagging Tutorial for Pixabay Images Watermarks and Redirects in Google Images - Reloaded Free Software by Pixabay on GitHub Draggable jQuery Colorbox Pixabay WordPress Plugin Version 2