Question

如何单独控制类似于 流部分高度 的Facebook。正常情况下减少整个盒子的高度但是如果试图控制它粉丝图像没有显示。

css .fan_box .page_stream{ ...,width:300px}到.fan_box .page_stream{...,width:150px}

我问因为iframe里面的流媒体框

Answer 1

没有办法改变高度。 Facebook没有提供改变高度的方法，也没有办法使用JavaScript和CSS来改变高度。

为什么我不能用JavaScript和CSS做到这一点？

CSS只是不适用于iFrame，因为这就是iFrame的工作原理 - 它基本上是另一个带有自己CSS的页面的窗口。

如果iFrame的网址与包含iFrame的网页不同，则Javascript不允许您访问iFrame的内容。这样做的：

document.getElementById('iframeID').contentWindow.document

会在Chrome中向您发出以下警告。

Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.

这样做的原因是为了防止XSS。 Same Origin Policy上有更多内容。

Answer 2

我在Like Box页面上看到了这一点，并且发现我回答你可以使用'data-height'属性：

data-height="250"

为我工作。这是我的例子：

http://www.skonet.com/Resources/Articles/Index.aspx

Answer 3

你可以减少包围div的高度，隐藏它的溢出，如果你想把它的顶部推到一个绝对定位的元素下面，它具有更高的z-index，如下所示：

<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
    facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>

Answer 4

我想你们仍然需要它，这是我能提供的最精确的技巧，而且它也很有希望与facebook每天更换facebook一样。

它有点棘手，但对你们有用..

在同一页面中创建两个类似于seprate的框，并在我的情况下在seprate div中关闭它们

<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code

现在在css

使用绝对位置来升级1

.up1 {
position:absolute;
z-index:99999;
background-color:white;
}

和up2

.up2 {
    padding-top:87px;
    }

它做了什么它会把盒子1放在盒子2上隐藏它的脸像和bla bla让你觉得你有一个包含图片和流媒体你想要的长度的盒子

Answer 5

我环顾四周，因为我遇到了类似这样的问题。如果检查了面部和标题，Facebook没有标准的自定义流的方法。

解决方案是采取不同的方式。如果您需要的流长达1000px，只需取消选中除流之外的所有内容。这会将其高度从默认的300px更改为您在高度字段中键入的任何值。

请参阅以下示例：

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>

然后，如果您仍然需要具有面孔的那个，获取新代码并以不同方式设置高度，则取消选中其他代码。以下是一个例子：

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

不要忘记在这些代码之前添加SDK。

我知道自发布以来已经有很长一段时间了，但这是今天帮助我的解决方案

Answer 6

是的，数据高度为250将有效，因为它减少了外部iframe

现在尝试将data-height设置为1000 - 它仍然是 300px 高度，

因为iframe中的内部div硬编码为300px和你无法控制它，因为它在跨域iframe ......

Answer 7

<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>

将此代码中的height调整为最适合您的方式。

facebook喜欢盒子流高度

7 个答案:

为什么我不能用JavaScript和CSS做到这一点？