fb:like-box, custom css?

Question

Is it possible to add a custom css file to a fb:like-box? For example, I would like to remove the borders around the iframe. Thanks

score 26 · Accepted Answer · answered Apr 06 '11 at 11:19

26

The new like-box does not accept the "css" attribute. You have to use the old fb:fan plugin to achieve it.

For example:

<fb:fan profile_id='[PAGE_ID]' width='300' height='256' show_faces='true' stream='false' header='false' css='[CSS_URL]'></fb:fan>

Remember to add the "all.js".

answered Apr 06 '11 at 11:19

DanielBlazquez

1,045
1
13
22

2

More info: http://stackoverflow.com/questions/4518024/facebook-like-box-external-css/4852787#4852787 – DanielBlazquez May 11 '11 at 18:26
1

This method appears to have stopped working a few days ago. Here's an alternative, very similar approach: http://pixabay.com/de/blog/posts/how-to-style-a-facebook-like-box-with-css-30/ – Simon Steinberger Jan 27 '13 at 09:44
And now a month later, their next approach is also broken. It's safe to say the custom css thing is dead for good. – lkraav Mar 04 '13 at 20:05
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. – DanielBlazquez Jun 04 '13 at 14:55

user1654320 · Answer 2 · 2012-09-07T09:43:55.937

<div id="fb-root"></div>

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">FB.init("Your-App-ID");</script>

<fb:fan profile_id="Your-Page-Profile-ID" connections="20" width="300" height="300" css="http://example.com/likebox-style.css?1"></fb:fan>

Don't use live stream for pages with low post rate, the stream will be empty if there are only posts older than 6 weeks.

score 1 · Answer 3 · edited Feb 12 '15 at 15:30

1

Facebook like box no longer supports css. Facebook reports: Support for custom CSS has been removed due to security implications. We now allow the likebox plugin to be rendered without a border via the show_border=false argument. However, if you like to make your like box colorful you can use the svg gradient trick. Read - Styling Facebook Like Box With SVG

edited Feb 12 '15 at 15:30

jahu

5,427
3
37
64

answered Aug 11 '13 at 18:14

Sara Farooqui

41
3

score 1 · Answer 4 · answered Feb 02 '11 at 13:09

1

You can add a css attribute to the <fb:like-box> tag with a href to your custom CSS stylesheet. This will allow you to manipulate the existing styles.

A good article on this subject: http://line25.com/tutorials/how-to-add-a-custom-facebook-like-box-to-your-site

answered Feb 02 '11 at 13:09

Chris

3,729
22
30

Ive tried that, but when i change to , the box disappears. – Johan Feb 02 '11 at 13:17

score 0 · Answer 5 · answered Nov 21 '11 at 22:09

fb:like-box, custom css?

5 Answers5

Linked