如何使新的 facebook 帖子嵌入功能响应？

Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

插件逻辑：

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

Answer 4

令人沮丧的是，我找不到比使用溢出和 max-width 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&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">

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

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

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

希望有人觉得这很有用。

Answer 5

如果您的意思是“响应式设计”中的“响应式”，则不能。 Facebook 使用跨域 iframe 来实现 JS/CSS 隔离和会话安全，它使用特权跨域通信根据内容动态生成 iframe 尺寸，因此您不能只玩 CSS 来获得您想要的东西.请参阅official page for the social plugin 上的此部分：

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.

如果您的意思是插件无法正常显示，您应该按照official page for the social plugin 上的获取代码按钮的说明进行操作。

详情：

您的标记缺少应用 ID。你在哪里找到这个标记？您需要指定应用 ID。如果你手动加载JS SDK，那就是将其添加到FB.initas seen here的参数中。在您的情况下，您使用的是缩短的基于 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，它可以工作。