How to remove the “Facebook social plugin” text?

Question

I\'m using the comments facebook social plugin When I embed it, the script created an iFrame that has the text \"Facebook social plugin\" with the facebook logo at the botto

Answer 1

The other solutions have the side effect of pushing things down. Here's a Less/Sass/SCSS solution that accounts for the pull down:

div.fb_iframe_widget span {
  overflow: hidden;
  margin-top: -32px;

  iframe {
    top: 32px;
  }
}

They've set the iframe to position: absolute, presumably to reduce your chances of pulling this off. That makes top easy to set, and voila.

They also set their iframe to overflow: hidden, so you can attack that with a shorter style if you prefer, and just end up with a larger gap at bottom of the comments box:

div.fb_iframe_widget iframe {
  box-sizing: border-box;
  padding-bottom: 32px;
}

Chomp.

Answer 2

If you play around with the box's dimensions, you can sort of make it disappear on it's own, and you haven't even technically broken their terms, because you haven't modified their code using your own hacks. =)

Example:

The dimensions on this one are 310x382. You can still see it poking it's head up, but essentially it's hidden enough that anyone just glancing over your page won't really notice it much. And since most surfers tend to speed read ...

Answer 3

See the iframe example in the description of the .contents() method.

You can easily access the DIV (or whatever) and modify the CSS for it, or manipulate any other way.

Answer 4

I used the following code to get rid of it. It seems to be the most up to date one that is working. Just change the margin-bottom to your liking.

.fb_iframe_widget {
    overflow: hidden;
}

.fb_iframe_widget span {
    margin-bottom: -30px;
}

Answer 5

You can only control the options given to you by the plugin developer (here, Facebook). Most plugin developers do not allow altering their code and Facebook is one of them. I suggest you stick to what Facebook provides you.

Have a read of the following:

1. Brand Permissions Center
2. Facebook Platform Policies

Answer 6

You're overcomplicating things. Small CSS change...

.fb_iframe_widget{overflow: hidden;}
.fb_ltr{margin-bottom: -20px;}

Done!

Sidenote - I agree with the warning about legal issues. You shouldn't really do this.