AngularJS + Facebook like Directive not working

Question

Im developing an AngularJs Application wich integrates fb-like in a view. It only works first time and if I refresh the browser also, when I navigate to other view and comeback the plugin does not work.

I have created a directive.

angular.module('myApp.directives', []).directive('fbLike',['$timeout', function($timeout) {
return {
    restrict: 'A',
    scope: {},
    template: "<div class=\"fb-like-box\" data-href=\"{{page}}\" data-width=\"{{width}}\" data-show-faces=\"{{faces}}\" data-height=\"{{height}}\" data-show-border=\"{{border}}\" data-stream=\"{{stream}}\" data-header=\"{{header}}\"></div>",
    link: function($scope, $element, $attrs) {
        var working, _ref, _ref1;

        $scope.page ="https://www.facebook.com/company_name";
        $scope.border = false;
        $scope.height = (_ref = $attrs.fbHeight) != null ? _ref : '260';
        $scope.faces = $attrs.fbFaces != null ? $attrs.fbFaces : 'false';
        $scope.stream = $attrs.fbStream != null ? $attrs.fbStream : 'true';
        $scope.header = $attrs.fbHeader != null ? $attrs.fbHeader : 'false';
        $scope.width = (_ref1 = $attrs.fbWidth) != null ? _ref1 : $element.parent().width()-19;
        $timeout(function () { return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse($element.parent()[0]): void 0; });
    }
};}]);

My view

    <script>

window.fbAsyncInit = function() {
 FB.init({

appId: '',
     status: true, // check login status
     cookie: true, // enable cookies to allow the server to access the session
     xfbml: true,  // parse XFBML
     oauth: true

   });

  };

(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/es_LA/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<div fb-like></div>

I was looking for other option but no lucky.

I don't know whats wrong.

Thank you so much

Answer 1

Best solution I found is add ezfb module to my App, now it's working great.

I fully recommend this module.

.config(function ($FBProvider) {
  $FBProvider.setInitParams({
    appId: '386469651480295'
  });  
})

There is a demo on Plunker Demo

Github Link

Answer 2

You should be able to do something as simple as:

directives.directive('fbLike', function () {
    return {
        restrict:'E',
        template: '<div class="fb-like" data-href="{{page}}" data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="true" data-send="false"></div>'
    }
});

... and in HTML it's simply:

<fb-like />

Note also that if you are not hosting the app on the domain specified in the like code, it will not display. In chrome, you can click network in developer tools and see the result of the ping done from the like widget's JavaScript.

<div><span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App&#039;s settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App&#039;s domains.</span><script>if (typeof console !=="undefined" && console.log) console.log("Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.");</script></div>