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

Issue

I am using angular-ui-route to change my pages. Some of the pages include facebook social plugins such as Comments and Like Box. However, when the route changes, the plugins did not show.

Here's my directive. The HTML part is simply

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>'
  }
});

And here's my ui-router configuration. The content.faq route is the page containing Comment plugin.

$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;

  }
})

I tried the iframe version, and it works. Unfortunately the Comments plugin does not have iframe version, so I guess I still have to figure it out. (Both the html5 and the XFBML version doesn't work. )

Solution

ezfb handled this problem.

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

Follow the instructions and install ezfb first.Then in your angular config phase:

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'
  });
  
});

Where you want to put the 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>

It's funny and stupid how I faced this same problem half year later, and googled my own question. Last time the deadline was close so I just give up and use iframe. This time since there's still no answer, I looked around and tried several approaches including FB.XFBML.parse() and FB=null, but none of them worked. Still not sure what causes the problem though.

Answered By - yuji