当前位置：文江博客话题详情

facebook like box 流高度

发布于 2024-09-14 04:43:36 字数 246 浏览 6 评论 0原文

如何单独控制 facebook like 框流部分高度。降低整个盒子的高度是正常的，但如果尝试控制它，风扇图像不会显示。

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

因为流iframe 内的框

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往日情怀 2024-09-21 04:43:36

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

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

CSS 不能通过 iFrame 应用，因为 iFrame 就是这样工作的——它基本上是一个带有自己的 CSS 的另一个页面的窗口。

如果 iFrame 的 URL 与包含 iFrame 的页面不同，Javascript 将不允许您访问 iFrame 的内容。执行：

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

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

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

这样做的原因是为了防止XSS。以下是有关同源政策的更多信息。

There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.

Why can't I do it with JavaScript and CSS?

CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.

Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:

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

Will give you the following warning in Chrome.

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

The reason for this is to prevent XSS. Here's more on the Same Origin Policy.

回复收藏 0 原文

黄昏下泛黄的笔记 2024-09-21 04:43:36

我在“赞框”页面上看到了这一点，并想我会回复您可以使用“数据高度”属性：

data-height="250"

对我有用。这是我的示例：

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

I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:

data-height="250"

Worked for me. Here's my example:

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

回复收藏 0 原文

昔日梦未散 2024-09-21 04:43:36

您可以降低包围 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>

you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:

<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>

回复收藏 0 原文

假面具 2024-09-21 04:43:36

我想你们仍然需要它，这是我能提供的最准确的技巧，而且它也有望与 facebook 每天改变的 facebook 类似盒子一起工作。

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

在同一页面创建两个单独的类似框，并在我的例子中将它们关闭在单独的 div 中

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

现在在 css 中

使用绝对位置来类 up1

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

和 up2

.up2 {
    padding-top:87px;
    }

它会做什么将盒子 1 放在盒子 2 上，隐藏其 facebook like 和 bla bla 让人感觉你有一个包含图片和所需长度的流媒体的盒子

I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.

Its a bit tricky but will work for you guys..

create two seprate like box of the same page, and close them in seprate div right in my case

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

Now in the css

use position absolute to class up1

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

and in up2

.up2 {
    padding-top:87px;
    }

What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght

回复收藏 0 原文

暗恋未遂 2024-09-21 04:43:36

我环顾四周，因为我遇到了这样的问题。如果检查面孔和标题，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。

我知道距离发布已经很长时间了，但这是今天对我有帮助的解决方案

I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.

The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.

See an example below:

<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>

Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:

<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>

Don't forget to add the SDK before these codes.

I know it's a long time since this was posted, but here is the solution that helped me today

回复收藏 0 原文

懷念過去 2024-09-21 04:43:36

是的，将 data-height 设置为 250 会起作用，因为它会减少外部 iframe

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

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

回复收藏 0 原文

り繁华旳梦境 2024-09-21 04:43:36

<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>

将此代码中的高度调整为最适合您的高度。

<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>

Adjust the height in this code to what works best for you.

回复收藏 0 原文

~没有更多了~