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

Answer 1

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".

Answer 2

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

Answer 3

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

Answer 4

More information about the topic:

If you want to use the force_wall attribute, you'll need to use the iframe version.

Basically:

Go to:

• http://developers.facebook.com/docs/reference/plugins/like-box/

• Get the iframe code

• Add the profile_id and css attributes to it (like explained above)

• Change the path from www.facebook.com/plugins/likebox.php? to http://www.connect.facebook.com/widgets/fan.php?...

DONE

Answer 5

<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.