3

I have the following code:

<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true" data-login-text="Sign in with Facebook"></div>

I want to be able to somehow change the width and height of the button to a custom size.

Is this possible?

I've tried using CSS techniques to manipulate the iframe but it doesn't seem to work, such as adding it to the CSS in inspect element:

._4z_b{
background: #4c69ba;
background: -webkit-gradient(linear, center top, center bottom, from(#4c69ba), to(#3b55a0));
background: -webkit-linear-gradient(#4c69ba, #3b55a0);
border-color: #4c69ba;
-webkit-border-radius: 2px;
color: #fff;
font-family: "Helvetica neue";
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 #354c8c;
width: 249px;
height: 36px;
}

How could I override the iframe made by Facebook to incorporate this custom sizing?

Thanks

cwiggo
  • 2,541
  • 9
  • 44
  • 87
  • 2
    Just a heads-up.. You might be violating some of Facebook's TOS. Take a look at [this page](https://www.facebookbrand.com/dos-donts) specifically the last bullet point of the `"Don'ts"` section. `(Don't) "Modify Facebook brand assets in any way, such as by changing the design or color"` – Lix Jul 24 '14 at 13:01
  • 1
    From personal experience, if Facebook were to catch-on to violations of their platform TOS they *will* take action. I had all of my applications taken down when they suspended my personal developers account... – Lix Jul 24 '14 at 13:03
  • Changing the width/height is not part of the design I would assume? As you can change the text i.e. making the width of the button bigger anyway? – cwiggo Jul 24 '14 at 13:03
  • 1
    This question needs to be directed to Mark Zuckerberg's lawyers I'm afraid :) The direct issue here is that you are trying to manipulate the css properties - **any** changes to the css could be considered a design change - even a single pixel IMO. – Lix Jul 24 '14 at 13:04
  • You could always implement your own login button and use their JS SDK to display the login dialog. If you were to do this you could make your button appear however you need - it would be 100% in your control. – Lix Jul 24 '14 at 13:06

3 Answers3

1

Use !important in CSS to override existing styles. For example, 

width: 249px !important;
kasparg
  • 428
  • 3
  • 14
  • I tried to do this in my main .css file. But it didn't override the div within the iframe facebook inserted – cwiggo Jul 24 '14 at 13:35
  • Sry, I mistook your question earlier... refer here If you're dealing with iframes --> http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe – kasparg Jul 24 '14 at 13:42
  • 1
    that seems like the best solution, forcing/amending the iframe with a inline stylesheet so that you can change the contents. Thanks for that. I won't be changing it anyway now. Going to keep it facebook, lawyer free. haha. Thanks anyway! reputation++ – cwiggo Jul 24 '14 at 13:56
1

CSS to override existing styles will not work.

For width: 300px;

<div class="fb-login-button" data-max-rows="1" data-size="large" data-width="310"   data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false">
Md Musfekur Rahman
  • 28
  • 8
0

You can use:

<a class="" id="" onclick="FB.login();">Facebook</a>

So you can create your login button and add your css

Matheus Gomes
  • 321
  • 2
  • 3