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

Question

我想使用 Facebook's Page Plugin to display posts from a Facebook Page in an AngularJS app. I know this can be done (prettier, better, smarter) through 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 标签进行硬编码，所以我什么时候获取它并在需要时触发它？

非常感谢！

Answer 1

简而言之， was right. Just use the Angular-EasyFB plugin. I just include the Angular-EasyFB module and follow the guide on 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 功能非常有限。

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

How to add FB's page plugin to an AngularJS application?

javascript

facebook

facebook-page

angularjs