Menu
I am trying to place the FB like button on my single page site built on Angular JS. The like button has to be displayed on a view (different than the index.html) displayed by a controller. But the like button shows up only for the first time I load that particular view. The button do not show up if I come back after visiting another view. Below is the code which loads FB SDK in the controller for the view -
(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 have tried various methods like using the FB.XFBML.Parse(), removing the script tag for FB sdk and adding it in every load(with the hope that it will work like the first time), tried using the directives, placing the fb-root div in various views and now I am clueless :|
I feel the issue is with loading or refreshing the SDK on revisiting the view but I am not sure.
Will appreciate any input which will help me move forward and please let me know if you need any more info.
Thanks, Sam.
713
I believe I found the solution.
Set in the begining of your widget script FB = null; and remove the "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'));
The accepted answer given by user2912405 it's perfect. I just wanted to add that if you are using 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 get the buttons re-loaded every time we change the view, for example when we follow a link
26
accepted answer worked for me, after much trial an error (fb root was ommitted). here is the full snippet to 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 make sure to delete any code from index page
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
