Geek Answers Handbook

The FB Like button appears only once - when I first load my AngularJS view

I am trying to put the FB button on my single page site built on Angular JS. A similar button should be displayed on the screen (other than index.html) displayed by the controller. But a similar button only appears the first time I load this particular view. The button does not appear if I return after visiting another view. Below is the code that loads the FB SDK into the controller for presentation -

(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/all.js#xfbml=1"; fjs.parentNode.insertBefore (js, fjs); } (document, script ',' facebook-jssdk '));

index.html has the following code -

<body ng-controller = "mainController">

<div id = "fb-root">

myView.html

<div class = "fb-like" data-href = "mySite.com/{{ProductID}}" data-> layout = "standard" data-action = "like" data-show-faces = "false" data- share = "true">

I tried various methods, such as using FB.XFBML.Parse (), removing the script tag for FB sdk and adding it every time I boot (with the hope that it will work like the first time), tried using directives by putting fb-root div in different views, and now I do not know: |

I feel the problem is loading or updating the SDK when I view the view again, but I'm not sure.

Understand any contribution that will help me move forward and please let me know if you need more information.

Thanks Sam.

+7
angularjs html5 single-page-application facebook-like facebook-social-plugins
source share
5 answers

I believe that I have found a solution.

Set script FB = null at the beginning of your widget; and delete "if (d.getElementById (id)) return;"

It should look like this:

FB = null; (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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
+10
source share

The accepted answer of user2912405 is perfect. I just wanted to add that if you use AngularJS

You should use:

 $scope.$on('$viewContentLoaded', function() { (function(d, s, id) { FB = null; 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/all.js#xfbml=1&appId=204269043065238"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); });

To reload the buttons every time we change the view, for example, when we follow the link

+9
source share

the accepted answer worked for me, after long trial errors (fb root was skipped). here is a complete snippet that you can include in your view:

 <div id="fb-root"></div> <script> FB=null; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxx&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

also be sure to remove any code from the index page

+2
source share

Personally, I got something like this. I have a component in angular 1.5. The index file has classic markup from the documentation and inside the component

 this.$onInit = function() { var facebookButtonEl = $element[0].querySelector('.fb-share-button'); if (facebookButtonEl) angular.element(facebookButtonEl) .attr('href', $location.absUrl()) .attr('data-href', $location.absUrl()); if (window.FB) { window.FB.XFBML.parse(); } }

The important part is FB.XFBML.parse (), which causes the button to re-render

0
source share

The accepted answer did not work for me in my Angular 5 project.

Adding this to my component class:

 ngOnInit() { if (window['FB']) { window['FB'].XFBML.parse(); } }
0
source share

More articles:


All Articles