Angular needs to reload the page for the fb sharing button to display

Question

I am trying to connect a facebook sharing plugin. The problem I am facing is that I need to reload the page in order to actually get the share button. If I go to the page using the link or url, the facebook share button will not appear, I need to reload the page, and then the button will appear. I use angular, so I thought to use the directive, but so far my efforts have not been successful.

this is where i have the directive in my template

<div class="fb-share-button" fb-share data-href="{{fbUrl}}" data-layout="button" id='fb-share'></div> 

here is 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]); }); } }; }); 

facebook sdk code that immediately after the opening tag 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> 

Answer 1

Here is a great set of directives for Angular common widgets, including FB: http://plnkr.co/edit/OvZRK6?p=preview

Just set the scope variable for your APP FB ID and user for your URL, imageURl and Name.

If you look at its code, you can see how to visualize the code and possibly customize the FB template for your needs.

 angular.module('myApp', ['angulike']) .run([ '$rootScope', function($rootScope) { $rootScope.facebookAppId = '85024842290'; // set your facebook app id here } ]); angular.module('myApp') .controller('myController', [ '$scope', function($scope) { $scope.myModel = { Url: 'http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx', Name: "AngularJS directives for social sharing buttons - Facebook, Google+, Twitter and Pinterest | Jason Watmore Blog", ImageUrl: 'http://www.jasonwatmore.com/pics/jason.jpg' }; } ]); /** * AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest * @author Jason Watmore <[e-mail]> (http://jasonwatmore.com) * @version 1.2.0 */ (function() { angular.module('angulike', []) .directive('fbLike', [ '$window', '$rootScope', function($window, $rootScope) { return { restrict: 'A', scope: { fbLike: '=?' }, link: function(scope, element, attrs) { if (!$window.FB) { // Load Facebook SDK if not already loaded $.getScript('//connect.facebook.net/en_US/sdk.js', function() { $window.FB.init({ appId: '85024842290', xfbml: true, version: 'v2.0' }); renderLikeButton(); }); } else { renderLikeButton(); } var watchAdded = false; function renderLikeButton() { if (!!attrs.fbLike && !scope.fbLike && !watchAdded) { // wait for data if it hasn't loaded yet watchAdded = true; var unbindWatch = scope.$watch('fbLike', function(newValue, oldValue) { if (newValue) { renderLikeButton(); // only need to run once unbindWatch(); } }); return; } else { element.html('<div class="fb-like"' + (!!scope.fbLike ? ' data-href="' + scope.fbLike + '"' : '') + ' data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>'); $window.FB.XFBML.parse(element.parent()[0]); } } } }; } ]) .directive('googlePlus', [ '$window', function($window) { return { restrict: 'A', scope: { googlePlus: '=?' }, link: function(scope, element, attrs) { if (!$window.gapi) { // Load Google SDK if not already loaded $.getScript('//apis.google.com/js/platform.js', function() { renderPlusButton(); }); } else { renderPlusButton(); } var watchAdded = false; function renderPlusButton() { if (!!attrs.googlePlus && !scope.googlePlus && !watchAdded) { // wait for data if it hasn't loaded yet watchAdded = true; var unbindWatch = scope.$watch('googlePlus', function(newValue, oldValue) { if (newValue) { renderPlusButton(); // only need to run once unbindWatch(); } }); return; } else { element.html('<div class="g-plusone"' + (!!scope.googlePlus ? ' data-href="' + scope.googlePlus + '"' : '') + ' data-size="medium"></div>'); $window.gapi.plusone.go(element.parent()[0]); } } } }; } ]) .directive('tweet', [ '$window', '$location', function($window, $location) { return { restrict: 'A', scope: { tweet: '=', tweetUrl: '=' }, link: function(scope, element, attrs) { if (!$window.twttr) { // Load Twitter SDK if not already loaded $.getScript('//platform.twitter.com/widgets.js', function() { renderTweetButton(); }); } else { renderTweetButton(); } var watchAdded = false; function renderTweetButton() { if (!scope.tweet && !watchAdded) { // wait for data if it hasn't loaded yet watchAdded = true; var unbindWatch = scope.$watch('tweet', function(newValue, oldValue) { if (newValue) { renderTweetButton(); // only need to run once unbindWatch(); } }); return; } else { element.html('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + scope.tweet + '" data-url="' + (scope.tweetUrl || $location.absUrl()) + '">Tweet</a>'); $window.twttr.widgets.load(element.parent()[0]); } } } }; } ]) .directive('pinIt', [ '$window', '$location', function($window, $location) { return { restrict: 'A', scope: { pinIt: '=', pinItImage: '=', pinItUrl: '=' }, link: function(scope, element, attrs) { if (!$window.parsePins) { // Load Pinterest SDK if not already loaded (function(d) { var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); p.type = 'text/javascript'; p.async = true; p.src = '//assets.pinterest.com/js/pinit.js'; p['data-pin-build'] = 'parsePins'; p.onload = function() { if (!!$window.parsePins) { renderPinItButton(); } else { setTimeout(p.onload, 100); } }; f.parentNode.insertBefore(p, f); }($window.document)); } else { renderPinItButton(); } var watchAdded = false; function renderPinItButton() { if (!scope.pinIt && !watchAdded) { // wait for data if it hasn't loaded yet watchAdded = true; var unbindWatch = scope.$watch('pinIt', function(newValue, oldValue) { if (newValue) { renderPinItButton(); // only need to run once unbindWatch(); } }); return; } else { element.html('<a href="//www.pinterest.com/pin/create/button/?url=' + (scope.pinItUrl || $location.absUrl()) + '&media=' + scope.pinItImage + '&description=' + scope.pinIt + '" data-pin-do="buttonPin" data-pin-config="beside"></a>'); $window.parsePins(element.parent()[0]); } } } }; } ]); })(); 

 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> </head> <body> <div ng-controller="myController" class="jumbotron text-center"> <div class="container"> <div fb-like></div> <div class="col-xs-3"> <div fb-like="myModel.Url"></div> </div> <div class="col-xs-3"> <div tweet="myModel.Name" tweet-url="myModel.Url"></div> </div> <div class="col-xs-3"> <div google-plus="myModel.Url"></div> </div> <div class="col-xs-3"> <div pin-it="myModel.Name" pin-it-image="myModel.ImageUrl" pin-it-url="myModel.Url"></div> </div> </div> </div> <div class="credits text-center"> <p> <a href="http://www.jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx">AngularJS directives for social sharing buttons</a> </p> <p> <a href="http://www.jasonwatmore.com">www.jasonwatmore.com</a> </p> </div> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="https://code.angularjs.org/1.2.16/angular.js"></script> <script src="angulike.js"></script> <script src="app.js"></script> </body> </html>