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

Question

我在谷歌找不到任何可以使新推出的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

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

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

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

插件逻辑:

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

Answer 2

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

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

Answer 3

如果您的意思是“响应式设计”中的“响应式”，则不能。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，它可以工作。