在父容器中包含 Facebook 嵌入式帖子答案

【问题标题】：Contain Facebook embedded post inside parent container在父容器中包含 Facebook 嵌入式帖子
【发布时间】：2016-02-29 05:20:38
【问题描述】：

我有一个简单的四列卡片布局（引导网格），它在移动设备上折叠为单列布局。我想在其中一张卡片中嵌入 Facebook 帖子。问题是桌面上的 Facebook 嵌入式帖子不会像在移动设备上那样展开/折叠以填充其父容器。我想知道是否有办法解决这个问题。根据their docs，我的卡片宽度约为 270 像素，低于桌面的 350 像素最小宽度。

我的容器是一个简单的 div，如下所示：

<div class="content">
    <div class="fb-post" data-href="{{post.facebook_link}}">
        <!-- Here is what the embedded post's structure looks like -->
        <span>
            <iframe>
                <!-- Widget lives in here -->
            </iframe>
        </span>
    </div>
</div>

现在，当我在我的一张卡片中嵌入帖子时，帖子会强制卡片展开，这会破坏我的布局（见附件）。我正在寻找一种方法来强制帖子通过 CSS/JS 解决方案填充父容器，或者欺骗 Facebook SDK 使其认为它在移动设备上。

我在这个问题上只遇到过one other post，但那个人明确想要帖子的移动版本。就我而言，我不在乎它是移动版还是桌面版，只要我可以让它填充父容器即可。因此，这个问题不是重复的。

到目前为止，我已经尝试过操作 iframe 和/或其父 span 元素的高度/宽度，但是一旦我调整了这些数字，这些更改就会撤消，因为 SDK 正在动态设置它们。

【问题讨论】：

您不能在 iframe 中操作任何 CSS，因为它来自另一个域。并且诱使 SDK 认为设备是移动设备也可能不会成功，因为 AFAIK 使用用户代理嗅探作为确定设备是否“移动”的主要手段。

标签： css facebook facebook-javascript-sdk

【解决方案1】：

解决此问题的一种方法对我有用，即使用 bootstrap 3 css 使用隐藏和可见的 div，并在 facebook 代码中调整数据宽度以适应容器大小。如果你想要一个活生生的例子，我在我的网站link to page 上使用了这个。我了解您使用 iframe，但这是我能为我的网站找到的唯一选项。我在这里提供了我的代码作为说明我的观点的指南，但是你将能够比我更好地设置它的样式，因为我担心我是一个草率的编码器......

https://jsfiddle.net/andydry1/6t5o2n8z/1/

data-adapt-container-width="true" *make sure this is set to true*

data-width="300" *change width to suit extra-small, small and large divs *

这不是您的情况的确切答案；但是它可能会提供一些帮助:-)

【讨论】：