如何将 FB 的页面插件添加到 AngularJS 应用程序？答案

【问题标题】：How to add FB's page plugin to an AngularJS application?如何将 FB 的页面插件添加到 AngularJS 应用程序？
【发布时间】：2015-12-26 05:52:13
【问题描述】：

我想使用Facebook's Page Plugin 在 AngularJS 应用程序中显示来自 Facebook 页面的帖子。我知道这可以通过the API 完成（更漂亮、更好、更智能），但如果可以的话，我宁愿只做插件。

插件提供代码片段，JS：

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=271678779576853";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

还有 HTML：

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

我不想在我的 Angular 模板中硬编码 script 标签，所以我什么时候得到它并在需要时触发它？

非常感谢！

【问题讨论】：

你看过Angular-EasyFB吗？
@Buzinas：我快速浏览了一下，但错过了关于Social Plugins 的部分。这看起来很有希望。谢谢！
@Buzinas，如果您想发布答案，我会将其标记为已接受。同时，我发布了一篇详细说明如何使用 EasyFB 解决此问题的文章。

标签： javascript angularjs facebook facebook-page

【解决方案1】：

简而言之，@Buzinas 是对的。只需使用Angular-EasyFB 插件。我只包含 Angular-EasyFB 模块并按照Social Plugins 上的指南进行操作。

我在我的应用程序的配置块中配置 Angular-EasyFB 模块：

angular.module('app').config(function(ezfbProvider) {
    // Set up FB
    ezfbProvider.setLocale('da_DK');
    ezfbProvider.setInitParams({
        appId: 00000 // My FB APP ID
    });
});

渲染 Facebook 页面插件的方法是使用与 generator creates for you 相同的代码：

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-width="1000" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

然后它就起作用了！但是请注意，页面插件的RWD 功能非常有限。

【讨论】：