Adding CSS to Facebook Like Box

Question

I'm trying to add css styling to Facebook Like Box XFBML file but it doesn't take the stylesheet the regular way – its own stylesheet comes after yours. So I did some search and found posts that said to add css="youstylesheetlink.css" to the fb:like-box like this:

<fb:like-box href="https://www.facebook.com/example" width="496" height="120" show_faces="true" border_color="" stream="false" header="false" css="http://example.com/css/style.css?2"></fb:like-box>

But no matter what I try it doesn't take the stylesheet. Can anybody guide me how I can achieve this?

Thank you.

This cannot be done. [See this thread too.](http://stackoverflow.com/questions/6077476/embedded-facebook-like-box-wont-let-me-style-it-why/) — Sparky, Jun 08 '11 at 02:14

score 3 · Answer 1 · answered Jun 08 '11 at 04:30

3

Facebook used to allow you to pass custom css to their like box, and that is why you see examples of it happening. But they stopped allowing you to do this for now.

answered Jun 08 '11 at 04:30

bkaid

51,465
22
112
128

This is the correct answer, now it's simply take it or leave it from what they offer you (unless you can have some deal with them directly). – CodeVirtuoso Jun 08 '11 at 05:15

score 2 · Answer 2 · answered Jun 08 '11 at 02:04

2

Unless your website happens to have the same matching protocol, domain and port as the Facebook iframe, you can not modify it because of Same Origin Policy.

answered Jun 08 '11 at 02:04

alex

479,566
201
878
984

Alex,so it can not be done? There are some tutorial sites that do this but I can't replicate their result. Plus my XFBML code looks different from theirs. – Shubo Jun 08 '11 at 02:09
@Shubo Is the resulting HTML contained in an `iframe` ? – alex Jun 08 '11 at 02:09
@Shubo: Even the XFBML code results in rendering an iFrame... AFAIK, this cannot be done. – Sparky Jun 08 '11 at 02:11
@Sparky672: can I do it using FB.XFBML.parse? – Shubo Jun 08 '11 at 02:14
@Alex, yes it results in iframe. – Shubo Jun 08 '11 at 02:16
3

@Shubo: If you could, it would be documented [here](http://developers.facebook.com/docs/reference/plugins/like-box/). IMHO, you cannot tinker with Facebook's corporate branding... they want a consistent user experience everywhere on the Internet, otherwise, you'll have people not trusting things that look like homemade "like" boxes. – Sparky Jun 08 '11 at 02:18

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

If you could do it, it would be documented here.

IMHO, you cannot tinker with Facebook's corporate branding... they want a consistent user experience everywhere on the Internet, otherwise, you'll have people not trusting things that look like homemade "like" boxes.

Also see this...

Embedded Facebook Like-Box won't let me style it. Why?

edited May 23 '17 at 12:23

Community

1
1

answered Jun 08 '11 at 14:43

Sparky

98,165
25
199
285

Adding CSS to Facebook Like Box

3 Answers3

Linked