Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Api / Facebook / Javascript

Angularjs And Facebook Comments

Post a Comment
I'm trying to dynamically update the review of facebook on my html , however is not showing , follow my Plunker. WHAT can be done to render the comments ? http://plnkr.co/edit/ggt7

Solution 1:

The SDK parses your document for elements to replace with social plugins only once upon initialization.

If you add content later on, you need to call FB.XFBML.parse to have it go through the document (or parts thereof) again.

Solution 2:

I did some testing and I ended up doing a directive and using FB.XFBML.parse (), follows suit working on Plunker:

http://plnkr.co/edit/oTj3jP

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fbComments = 'http://developers.facebook.com/docs/plugins/comments/';
});

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

  return {
    restrict: 'A',
    scope: {},
    link: functionpostLink(scope, elem, attrs) {
      attrs.$observe('pageHref', function(newValue) {
        var href = newValue;
        var numposts = attrs.numposts || 5;
        var colorscheme = attrs.colorscheme || 'light';
        var width = attrs.width || '100%';
        elem.html(createHTML(href, numposts, colorscheme, width));
        FB.XFBML.parse(elem[0]);
      });
    }
  };
});
<!DOCTYPE html><htmlng-app="plunker"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '" />');
  </script><linkhref="style.css"  /><scriptdata-semver="1.2.13"src="http://code.angularjs.org/1.2.13/angular.js"data-require="angular.js@1.2.x"></script><scriptsrc="script.js"></script></head><bodyng-controller="MainCtrl"><divid="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/pt_BR/sdk.js#xfbml=1&version=v2.4";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script><divng-if="fbComments"><divclass="fb-comments"fb-comment-boxpage-href="{{fbComments}}"data-numposts="5"data-colorscheme="light"data-width="100%"></div></div></body></html>

Post a Comment for "Angularjs And Facebook Comments"