CODEWITHSUNDEEP
facebookbuttonsendbackground-color
becassin
becassin

Reputation: 1

remove facebook send button's background color

I'm using facebook Send button on my website. Since a few days, this button has a background color set to white, which is really ugly on my website. I'm also using the Like button, working fine.

Here is an example: *

The background color is set in the body tag of the iframe, so I dont have access to it... Any suggestion?

Upvotes: 0

Views: 1247

Answers (4)

OleSchmitt
OleSchmitt

Reputation: 175

Yes, it can be done.

First, add an #id to your FB code (I use myself a span instead of a div):

<span id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></span>

You can leave your code just as it is, just add that id="fboverlay" over there.

Then edit your css and add:

#fboverlay {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: gayscale(100%);
}

And that's it.

Shurelly it's using CSS3, therefore it's not 100% compatible (specially with old browsers), you know how it is...

Upvotes: 0

Davy
Davy

Reputation: 11

Have you guys tried out using allowTransparency="true" on the iframe tag?

Upvotes: 1

Jeremy Schultz
Jeremy Schultz

Reputation: 677

colorscheme changes the button color and also puts a black background on the pop-up, but the white button background remains. I tried setting the fb:send element's width to the button width (about 53px) but the pop-up is a child of that element and gets cut off with that width.

I don't see a solution to it myself. In my project, I was going to put the button on top of an image background but instead I'll have to insert it in a white region below the image.

Upvotes: 0

jchmski
jchmski

Reputation: 161

you can try setting colorscheme='dark' if you are using the XFBML code or add &colorscheme=dark to the end of the facebook URL in the iframe src attribute.

Using CSS will not work here since the content is being loaded in an iframe...

Upvotes: 1

Related Questions