How to remove the "Facebook social plugin" text?

E

10

9

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 bottom (as seen in the image attached below).

I inspected the element using Firebug and tried to set its class to display:none; in my CSS file. However - that does not hide it (I suspect it's because it's in its own iFrame). How can I use CSS or jQuery (or any other method) to disable that text?

Thanks!

Facebook social plugin

Erdei answered 2/2, 2011 at 1:59 Comment(2)

Maybe you can cover it with a carefully placed <div>. But I would read the terms of service to see if masking attribution is allowed. – Oculo 2/2, 2011 at 2:10

you should see this post but be carfull about legal issues : https://mcmap.net/q/391264/-div-on-top-of-iframe – Ruckus 13/10, 2014 at 16:35

D

8

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.

Dollydolman answered 22/2, 2011 at 12:54 Comment(3)

Thanks. I decided to just leave it in there to comply with FB's terms of use. – Erdei 23/2, 2011 at 16:56

@yuval what are the legal issues for removing Facebook social plugin text? And where it is stated? – Socialist 7/10, 2015 at 9:28

I don't think any civilized country could prevent people from modifying content that is displayed on THEIR browser. It is a similar joke with attempts to ban ad-blockers in certain countries. – Asur 21/6, 2016 at 18:11

C

6

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:

Cornwallis answered 2/2, 2011 at 8:45 Comment(0)

A

2

If it's a CSS issue for the iFrame then you can't do anything about it (eg: overide it). It is loading from another site so you don't have control over it.

Au answered 2/2, 2011 at 2:6 Comment(0)

E

1

I ran into this issue as well. I fixed it by setting the height of the iframe using an inline style and set overflow to hidden.

Example: iframe is 185px. Add this inline:

style="overflow:hidden; height:160px;"

Excurved answered 17/6, 2011 at 19:36 Comment(0)

L

0

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.

Lohse answered 2/2, 2011 at 2:39 Comment(1)

Hi, this of course will only work if the content of the IFRAME is in the same domain as the main page, which in your case isn't true, so I'm afraid it shouldn't work. Sorry! I suspect IDE's approach of a carefully positioned DIV hiding the element is the only way. – Lohse 2/2, 2011 at 2:42

I

0

.fb_iframe_widget {overflow: hidden;}
div.fb-comments.fb_iframe_widget span {margin-bottom: -35px;}

Inviolate answered 18/10, 2012 at 20:21 Comment(0)

C

0

Css

.facebookOuter { width:248px; padding:10px 0px 10px 10px; height:230px; overflow:hidden; } .facebookInner { height:250px; width: 238px; overflow: hidden; }

And Like Box

<div class="facebookOuter"> <div class="facebookInner"> <div class="fb-like-box" data-width="250" data-height="300" data-href="http://www.facebook.com/myhumourbook" data-border-color="dodgerblue" data-show-faces="true" data-stream="false" show_border=false data-header="false"> </div> </div> </div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

Cammiecammy answered 11/8, 2013 at 19:13 Comment(0)

G

0

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:

enter image description here

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

Gunshy answered 12/12, 2013 at 15:58 Comment(0)

B

0

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;
}

Brilliantine answered 28/6, 2015 at 22:3 Comment(0)

K

0

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.

Kerrill answered 16/4, 2016 at 15:41 Comment(0)

Recommended topics

Hot tags