更改Facebook登录按钮的宽度和高度

Question

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>

我希望能够以自定义的大小来改变按钮的宽度和高度。

这个可能吗？

我尝试使用CSS技巧来操作iframe，但似乎不起作用，例如将其添加到检查元素中的CSS中：

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

我该如何覆盖 Facebook 创建的 iframe，以便加入自定义大小？

谢谢。

- cwiggo

---

提醒一下，您可能正在违反Facebook的某些条款。请查看此页面，特别是“不要做”的部分中的最后一个项目：“不要以任何方式修改Facebook品牌资产，例如更改设计或颜色”。(https://www.facebookbrand.com/dos-donts) - Lix

从个人经验来看，如果Facebook发现违反其平台服务条款，他们一定会采取行动。当他们暂停我的个人开发者账户时，我所有的应用程序都被下架了... - Lix

改变宽度/高度不是设计的一部分，我想这样说可以吗？因为你可以改变文本，例如使按钮的宽度更大？ - cwiggo

这个问题需要向马克·扎克伯格的律师咨询，我很抱歉:) 直接的问题是，你在试图操控CSS属性 - 任何对CSS的更改都可能被视为设计变动 - 即使只是一个像素的变化在我看来也是如此。 - Lix

你可以实现自己的登录按钮并使用他们的JS SDK来显示登录对话框。如果你这样做，你可以使你的按钮以任何你需要的方式出现 - 它将完全在你的控制之下。 - Lix

Answer 1

在CSS中使用!important来覆盖现有样式。例如，

width: 249px !important;

- kasparg

---

我试图在我的主css文件中完成这个操作。但它没有覆盖Facebook插入的iframe中的div。 - cwiggo

抱歉，我之前误解了你的问题...请参考这里，如果你正在处理iframe --> https://dev59.com/Vmw15IYBdhLWcg3wntKh - kasparg

这似乎是最好的解决方案，通过内联样式表强制/修改iframe以便您可以更改内容。谢谢。我现在不会再更改它了。打算保持Facebook，无需律师。哈哈。无论如何感谢！声誉++ - cwiggo

Answer 2

CSS用于覆盖现有样式将不起作用。

对于宽度：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

Answer 3

你可以使用以下代码：

``` Facebook ```

这样你就可以创建自己的登录按钮并添加自定义样式。

- Matheus Gomes