Is there any way to change the CSS of the Facebook Like Box?

Question

So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.

The CSS is this:

.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}

This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.

I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).

Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.

Is there any way to fix this?

I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.

All I want is for this class to be set to overflow: hidden;

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.

Read more in this duplicate.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 07 '13 at 19:37

Tanner

1,214
3
12
16

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.

edited May 23 '17 at 11:56

Community

1
1

answered Aug 07 '13 at 19:37

Steven Lambert

5,571
2
29
46

I'm not changing the style, I'm changing the location of where the scrollbar is, because it makes no sense in the location it's at. – Steven Matthews Aug 07 '13 at 19:37
Changing the position of the scrollbar is part of changing styles. CSS stands for Cascade Style Sheet. Anything in a .css file is considered element styles. – R Lacorne Aug 07 '13 at 20:20

score 0 · Answer 3 · answered Aug 07 '13 at 19:41

0

You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's

answered Aug 07 '13 at 19:41

Andreyco

22,476
5
61
65

score 0 · Answer 4 · edited Feb 12 '14 at 16:49

If you set !important then it will over rule any other CSS applied to the element

.pluginLikeboxStream {
    overflow: hidden !important;
}

!important should only be used in circumstances like this.

EDITED

To apply it to the iFrame you need to use jQuery

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});

This is how i've always done it.

Is there any way to change the CSS of the Facebook Like Box?

4 Answers4