Facebook comment plugin Angularjs

StackOverflow https://stackoverflow.com/questions/23516305

Question

I am facing a strange error while adding the facebook comment plugin in my AngularJS app. The simplified structure of the app page is

<html ng-app="myapp">
<head>
 ...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>

The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows

<div id="fb-comment-box>
 <div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>

The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is 

data-href = "http://mydomain.com/page/2"

But below the fb comment box, Facebook shows following error

Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.

I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?

Was it helpful?

Solution

This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.

A directive seems like a good choice here:

You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.

The directive:

.directive('dynFbCommentBox', function () {
    function createHTML(href, numposts, colorscheme) {
        return '<div class="fb-comments" ' +
                       'data-href="' + href + '" ' +
                       'data-numposts="' + numposts + '" ' +
                       'data-colorsheme="' + colorscheme + '">' +
               '</div>';
    }

    return {
        restrict: 'A',
        scope: {},
        link: function postLink(scope, elem, attrs) {
            attrs.$observe('pageHref', function (newValue) {
                var href        = newValue;
                var numposts    = attrs.numposts    || 5;
                var colorscheme = attrs.colorscheme || 'light';

                elem.html(createHTML(href, numposts, colorscheme));
                FB.XFBML.parse(elem[0]);
            });
        }
    };
});

The HTML:

<div id="fb-comment-box" dyn-fb-comment-box
        page-href="https://example.com/page/{{page.id}}"
        numposts="5"
        colorscheme="light">
</div>

NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).

See, also, this short demo.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top