search

wlepinski / angularjs-facebook-sdk

Integration between AngularJS and Facebook SDK for Javascript.
http://wlepinski.github.io/angularjs-facebook-sdk/
MIT License
36 stars 7 forks source link

Share-button, comment-box Doesn't show when inside of ng-view #4

Closed renanfranca closed 7 years ago

renanfranca commented 9 years ago

I found the same problem here on stackoverflow (wasn't with your framework): http://stackoverflow.com/questions/18392946/facebook-comments-box-twitter-feed-broken-in-angular-symfony-web-app

Is there any workaround? I notice that profile picture works because you make an api call inside the directive.. and every time i change route it's bring the picture as expected..

renanfranca commented 9 years ago

I made a workaround changing the HTML by listening to attrs.$observe and calling FB.XFBML.parse(element[0]).

Here is the source: http://stackoverflow.com/questions/23516305/facebook-comment-plugin-angularjs

And here is the code i changed: function FacebookShareDirective(facebookService) { return { restrict: 'E', replace: true, template: '/fb:share-button', scope: { href: '@href', type: '@type' }, link: function (scope, element, attrs) { facebookService.ready.then(function () { FB.XFBML.parse(element[0]); }); function createHTML(href, type) { return '<fb:share-button href="' + href + '" ' + 'type="' + type + '" ' + '>/fb:share-button'; //return '<div class="fb-comments" ' + // 'data-href="' + href + '" ' + // 'data-numposts="' + numposts + '" ' + // 'data-colorsheme="' + colorscheme + '">' + // '

'; } attrs.$observe('pageHref', function (newValue) { var href = newValue; var type = scope.type;

            console.log('FacebookShare: observe: pageHref = ' + newValue);

            console.log('FacebookShare: observe:function createHTML = ' + createHTML(href, type));

            console.log('FacebookShare: $scope.href = ' + scope.href + ' - $scope.type = ' + scope.type);

            element.html(createHTML(href, type));

            facebookService.ready.then(function () {
                FB.XFBML.parse(element[0]);
            });
        });
    }
};

}

FacebookShareDirective.$inject = ['facebookService'];

angular.module('angularjs-facebook-sdk.directives') .directive('afbShareButton', FacebookShareDirective);

jonas-pietzsch commented 9 years ago

Is this problem already fixed? I included this very nice angular plugin into a project today. I tried if everything works with inserting the FacebookNameDirective. Quickly I had to notice that it only works when it was placed outside of ng-view, just like this issue states... Was it already fixed in the latest version? I tried to understand your workaround, renanfranca, but I'm not getting smart of the code inserted above. Could you gist it, please? That would be very kind

cpeker commented 8 years ago

+1

pajingko commented 7 years ago

I have the same problem.

wlepinski commented 7 years ago

I'll take a look.

wlepinski commented 7 years ago

@pajingko @cpeker @jverhoelen @renanfranca I just updated the plugin to version 1.1.0 (https://github.com/wlepinski/angularjs-facebook-sdk/releases/tag/v1.1.0). Please take a look at the example folder because it's working for me now. I think that the upgrade of both Angular and Facebook SDK did the trick. If this version doesn't work for you, I'll need a JSBin or something similar with a code sample of the problem.