Question

我在页面上放了一个像Facebook一样的按钮。

在类似按钮的右侧，是一个推文按钮。

我已将like按钮的数据宽度（使用发送按钮）设置为101px，这似乎是正确的。

问题是，like按钮会生成宽度为150px的iframe。这意味着我的推文按钮上有大约49个像素的iframe重叠。

你看不到这种重叠，但这意味着我无法点击Tweet！

看起来iframe是使用内联样式生成的，所以我不能用css覆盖它们。我也试过玩z-index。

任何帮助都会很棒！

-ev

Answer 1

或者将此JavaScript放在iframe下方。因为没有太多优于内联样式，所以一旦加载它就可以改变它。

<script> document.getElementById("iFRAME").style.width = "101px"; </script>

您需要找出iFrame的ID

Answer 2

我注意到like按钮上有一个属性，指定它应该有多宽。我将我的设置为125（我正在使用按钮计数布局选项），它有助于浮动Tweet按钮和旁边的其他共享。您还可以在Facebook developers page上创建按钮时指定宽度。

<div class="fb-like" data-send="false" data-layout="button_count" data-width="125" data-show-faces="false" data-action="recommend"></div>

我过去常常使用溢出：隐藏技巧但是现在类似按钮有一个小弹出/工具提示，让用户输入注释以及类似的东西，溢出：隐藏切断，所以它很尴尬和经常无法使用。

Answer 3

我想你找到了解决方案。我做的是将facebook按钮包装进去并将twitter按钮放入，然后给twitter按钮一个更大的z-index值。 --html -

<body>
...
<div id="facebook_like">
  iframe code pasted here
</div>
<div id="twitter_share">
  iframe code pasted here
</div>
...
</body>

- CSS -

 #facebook_like{
z-index:0;
postion:absolute;
right:...;
}
 #twitter_share{
z-index:1;
postion:absolute;
right:...;
}

Answer 4

你也可以将like按钮包装在一个宽度为：101px且overflow：hidden的div中，我相信它会做你想要的。

Answer 5

如果您将实际代码或链接粘贴到您遇到问题的网站，那就太好了。可能也有问题，你正在把这些按钮放进去。

这是我的Like按钮的示例，它没有任何iframe。你可能正在使用旧版本的示例代码，或者我不知道。

<div class="fb-like" data-href="http://www.website.cz/actualpage.html" data-send="true" data-width="450" data-show-faces="false" data-colorscheme="dark" data-font="trebuchet ms"></div>

因为它已经在这里链接了。不要忘记从官方FB站点生成代码 - https://developers.facebook.com/docs/reference/plugins/like/ - 您还可以在其中阅读代码中的实际标签 - 根据需要进行设置。

如果那个div对你不起作用。尝试使用css float值创建一个包含左侧FB和右侧Tweet的div。

将两个按钮放在一个应该阻止的div中。

我猜它看起来像这样：

<div class="share">
 <div class="fb">/fb like code/</div>
 <div class="twitter">/twitter button code/</div>
</div>

CSS：

.share {
display: block;
}

.fb{
width: 101px;
float: left;
}

.twitter{
width: yourwidthpx;
float: right;
}

无论如何，我认为你的问题只是你使用了一个不需要的iframe。如果您粘贴代码以便其他人可以提供更好的帮助，那将是最好的。

Facebook Like Button iFrame太宽了

5 个答案: