I've been working on integrating Facebook's share plugin, but I've encountered an issue where the share button only shows up after reloading the page. If I navigate to the page through a link or URL, the button doesn't appear until after a reload. I attempted to use an Angular directive to solve this problem, but haven't had much success so far.
Here is how I've implemented the directive in my template:
<div class="fb-share-button" fb-share data-href="{{fbUrl}}" data-layout="button" id='fb-share'></div>
And here is the code for my directive:
angular.module('App').directive('fbShare', function () {
function createHTML(href, layout) {
return '<div class="fb-share-button" ' +
'data-href="' + href + '" ' +
'data-layout="' + layout + '" ' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('dataHref', function (newValue) {
var href = newValue;
var layout = attrs.layout || 'button';
elem.html(createHTML(href, layout));
FB.XFBML.parse(elem[0]);
});
}
};
});
The Facebook SDK code should be included right after the opening body tag:
<div id="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/en_US/sdk.js#xfbml=1&version=v2.5&appId=xxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>