9

我使用下面的代码来获取 Facebook 的 Like 按钮。现在的事情是，我想更改呈现的 Like 按钮的大小。我尝试了根本不起作用的宽度属性。我试图覆盖 facebook 用于以下代码的 CSS 类。但是覆盖 CSS 类也不能正常工作。所以告诉我如何增加Like按钮的高度和宽度。

<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
4

4 回答 4

16

或者您可以使用 CSS 定位 iframe 并使用 CSS3 对其进行缩放。像这样的东西：

#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
-moz-transform: scale(1.5); 
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}

这是一个例子http://www.tinydesign.co.uk/like/

于 2012-10-28T13:52:28.420 回答
3

Facebook Like 按钮由它们提供的 Javascript 片段呈现在 iFrame 中，iFrame 由 Facebook 托管，并且样式不能被覆盖。

完全正确....如果您能够更改“赞”按钮的大小或样式，那么我们会在互联网上看到巨大的、鲜红色的、像按钮一样闪烁的按钮——那将是可怕的。它们被设计为谨慎、可识别且不引人注目。

于 2012-05-30T16:46:10.147 回答
3

你不能改变这种Facebook按钮的样式，但是如果你使用JavaScript OpenGraph SDK你可以创建你自己的，这样你可以使用一个div（带有自定义信息）或者使用一个图像，基本上自定义它但是你想要它。缺点是它不像使用 Facebook 生成的按钮那样直接，而且你需要一个 App Id 并且用户给你一些权限，但除此之外你可以随意使用它们。

于 2012-05-30T16:58:12.883 回答
0

为 iframe 创建 div 类

<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>

现在添加这个 CSS

.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}

结果：

Facebook喜欢演示

如果您不希望按钮位于中心，则可以使用浮动而不是边距

于 2016-05-23T06:04:52.413 回答