当angular-ui-router改变路由时，Facebook的社交插件就会消失

Facebook social plugins disappear when angular-ui-router changes route

本文关键字：插件 消失 Facebook 改变 angular-ui-router 路由      更新时间：2023-09-26

我正在使用angular-ui-route来更改我的页面。其中一些页面包括facebook的社交插件，如评论和喜欢的盒子。但是，当路由改变时，插件没有显示。

这是我的指示。HTML部分就是简单的

app.directive('fbComment', function () {
  return {
    restrict: "E",
    template: '<div class="fb-comments" data-href="http://example.com/comments" data-width="630" data-numposts="5" data-colorscheme="light"></div>'
  }
});

这是我的ui-router配置。内容。faq路由是包含Comment插件的页面。

$stateProvider
.state('landing', {
  url: "/",
  template: " ",
  onEnter: function($rootScope){
    $rootScope.isContent = false;
  }
})
.state('content', {
  abstract: true,
  url: "/",
  templateUrl: "/javascripts/angular/views/content.html",
  onEnter: function($rootScope){
    $rootScope.isContent = true;
  }
})
.state('content.faq', {
  url: "faq",
  templateUrl: "/javascripts/angular/views/faq.html",
  onEnter: function($rootScope){
    $rootScope.isContent = true;
  }
})

我尝试了iframe版本，它可以工作。不幸的是，评论插件没有iframe版本，所以我想我仍然要弄清楚。(html5和XFBML版本都不起作用。)

ezfb已处理此问题。

Github: https://github.com/pc035860/angular-easyfb

按照说明先安装ezfb。然后在你的angular配置阶段:

angular.module('myApp').config(function(ezfbProvider) {
  // ezfb settings
  ezfbProvider.setLocale('zh_TW'); // if not en_US
  ezfbProvider.setInitParams({
    appId: 'YOUR_APP_ID',
    version: 'v2.0'
  });
  
});

like box的位置:

<div class="fb-like-box" onrender="fbLikeRendered()"
     data-href="https://www.facebook.com/YOUR_PAGE" 
     data-height="443" data-colorscheme="light" data-show-faces="true" 
     data-header="false" data-stream="true" data-show-border="false"></div>

半年后，我遇到了同样的问题，我自己也在谷歌上搜索了我的问题，这既有趣又愚蠢。上次的截止日期很近，所以我放弃了，使用iframe。这一次，由于仍然没有答案，我环顾四周，尝试了几种方法，包括FB. xfxml .parse()和FB=null，但都不起作用。

谢谢你指出ezfb。我要做的是解决这个问题，让FB-comments插件显示在我不同的ui-router视图是:

<div class="fb-comments" data-href="https://www.facebook.com/YOUR_PAGE" data-width="100%" data-numposts="10"></div>

和在app.js中:

app.config(function(ezfbProvider) {
  // Default init function
  var _defaultInitFunction = ['$window', 'ezfbInitParams', function ($window, ezfbInitParams) {
    // Initialize the FB JS SDK
    $window.FB.init(ezfbInitParams);
  }];
  ezfbProvider.setInitFunction(_defaultInitFunction);
  
});

如果对别人有帮助的话

相关文章：