Question

我使用下面的代码来获取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>

Answer 1

或者您可以使用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/

的示例

Answer 2

Facebook Like按钮通过他们提供的Javascript剪辑在iFrame中呈现，iFrame由Facebook托管，并且无法覆盖样式。

非常正确....如果你能够改变Like按钮的大小或样式，那么我们会在整个互联网上看到巨大的，鲜红色的，闪烁的按钮 - 这将是非常糟糕的。它们的设计是谨慎的，可识别的和非突兀的。

Answer 3

您无法更改此类Facebook按钮的样式，但如果您使用JavaScript OpenGraph SDK，则可以创建自己的样式，这样您就可以使用div（带有自定义信息）或使用图像，基本上自定义它，但你想要它。缺点是不像使用Facebook生成的按钮那样直截了当，并且您需要App Id并且用户会给您一些权限，但除此之外，您可以随意使用它们。

Answer 4

为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 Like Demo

如果您不想在中心按钮，则可以使用浮动保证金

改变Facebook Like按钮的大小

4 个答案: