14

我在 google 上找不到任何可以使新引入的 facebook 帖子嵌入响应式的解决方案。有没有人有解决方案或技巧？谢谢

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766">Post</a> by <a href="https://www.facebook.com/security">Facebook Security</a>.</div></div>
4

5 回答 5

21

设置data-width为auto使用流体宽度：

<div class="fb-post" data-href="url" data-width="auto"></div>

于 2016-12-06T15:06:16.470 回答
18

我创建了一个小的 jQuery 插件来解决这个问题。由于 Facebook Embedded Posts 插件在使用data-width属性时会呈现正确的宽度，因此我们可以在页面上监听宽度变化，更新data-width属性，然后重新渲染插件。

见http://jsfiddle.net/brohde/GRcen/

用法：$('#post').autoResizeFbPost();

插件逻辑：

  • 准备好文件：
    • 保存原始 HTML$('#post')以保留任何<div class="fb-post">元素 - Facebook SDK 将其从 DOM 中删除。
  • 修复：使用正确的属性（Uses ）更新所有<div class="fb-post">元素。data-width$('#post').width()
  • 在调整窗口大小时，再次运行The Fix并调用FB.XFBML.parse();渲染 Facebook 插件。该插件将在最后一次调整窗口大小后等待 1 秒，以避免多次 DOM 更新和FB.XFBML.parse();调用。
于 2014-03-26T17:56:24.693 回答
5

如果您的意思是“响应式设计”中的“响应式”，则不能。Facebook 使用跨域 iframe 来实现 JS/CSS 隔离和会话安全，它使用特权跨域通信根据内容动态生成 iframe 尺寸，因此您不能只使用 CSS 来获得您想要的东西. 有关社交插件，请参见官方页面上的此部分：

Can I customize how the post is displayed on my web page?

Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.

如果您的意思是插件无法正常显示，您应该按照社交插件官方页面上的获取代码按钮的说明进行操作。

细节：

您的标记缺少应用 ID。你在哪里找到这个标记？您需要指定应用 ID。如果您手动加载 JS SDK，这意味着将其添加到FB.init 此处所示的参数中。在您的情况下，您使用的是缩短的基于 URL 的初始化，其中 SDK URL 在其片段中具有参数：#xfbml=1在您的示例中。您需要对其进行更改，使其更像#xfbml=1&appId=1234567890.

更新：您应该使用浏览器内置开发人员工具（或 Firebug 等）中的控制台来查看有关 JS SDK 错误的信息。当我在 https:// 网站上尝试您的代码时，出现此错误：

[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.

所以我将 URL 从更改http://connect.facebook.net/...为协议相对 URL：//connect.facebook.net/...

另一种选择是仅在 http:// 站点上尝试。那时，我收到以下错误：

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().

这证实了我的怀疑——你需要一个应用 ID。我添加了一个应用程序 ID，它可以工作。

于 2013-10-27T22:36:26.903 回答
3

发现它令人沮丧我找不到比利用溢出和最大宽度 100% 强制水平滚动条更优雅的东西了。

添加 -style="overflow-x: auto; max-width: 100%;"

导致嵌入的以下 fb-post 部分；

<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&amp;set=a.202870829840431.42585.202866106507570&amp;type=1" data-width="550">

如果你想要更优雅一点，总是可以在滚动条上实现样式。

CSS Webkit 滚动条 - http://css-tricks.com/custom-scrollbars-in-webkit/

jQuery 微型滚动条 - http://baijs.nl/tinyscrollbar/

希望有人觉得这很有用。

于 2013-10-29T05:22:28.487 回答
0

如果您的帖子是视频，您可以使用嵌入视频而不是嵌入帖子，它们是响应式的。您可以从打开的图形中获取所有其他数据并创建自己的设计。

https://developers.facebook.com/docs/plugins/embedded-video-player

于 2016-11-23T05:08:01.740 回答