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

我在谷歌上找不到任何解决方案可以使新引入的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>

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

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

我创建了一个小的jQuery插件来解决这个问题。由于 Facebook 嵌入式帖子插件在使用 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();调用。

如果你的意思是"响应式设计"中的"响应式"，你不能。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 的 init，其中 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，它可以工作。

发现这很令人沮丧，我找不到比利用溢出和最大宽度 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 Scrollbar - http://baijs.nl/tinyscrollbar/

希望有人觉得这有用。

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

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

相关内容

最新更新

热门标签：