Question

我正在尝试将FB like按钮放在我在Angular JS上构建的单页网站上。类似按钮必须显示在控制器显示的视图（不同于index.html）上。但是类似按钮仅在我第一次加载特定视图时出现。如果我在访问另一个视图后回来，则按钮不会显示。下面是在控制器中为视图加载FB SDK的代码 -

（function（d，s，id）{
      var js，fjs = d.getElementsByTagName（s）[0];       if（d.getElementById（id））{
      返回;       }       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 具有以下代码 -

＆lt; body ng-controller =“mainController”＆gt;

＆lt; div id =“fb-root”＆gt;

myView.html

＆lt; div class =“fb-like”data-href =“mySite.com / {{ProductID}}”data-＆gt; layout =“standard”data-action =“like”data-show-faces =“false”data-share =“true”＆gt;

我尝试了各种方法，例如使用FB.XFBML.Parse（），删除FB sdk的脚本标记并在每次加载时添加它（希望它能像第一次一样工作），尝试使用指令，将fb-root div置于各种视图中，现在我无能为力：|

我觉得问题是在重新访问视图时加载或刷新SDK，但我不确定。

感谢任何有助于我前进的意见，如果您需要更多信息，请与我们联系。

谢谢，萨姆。

Answer 1

我相信我找到了解决方案。

在小部件脚本的开头设置FB = null;并删除“if（d.getElementById（id））return;”

它应该是这样的：

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'));

Answer 2

用户2912405给出的接受答案是完美的。我只想添加一下，如果您使用的是AngularJS

您应该使用：

$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'));
});

每次我们更改视图时都会重新加载按钮，例如当我们按照链接

时

Answer 3

接受的答案对我有用，经过多次试验后出现错误（fb root被忽略）。这是您的视图中包含的完整代码段：

<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>

还要确保删除索引页面中的任何代码

Answer 4

在我的Angular 5项目中，接受的答案对我不起作用。

将此添加到我的组件类中：

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

Answer 5

就个人而言，我最终得到了类似的东西。我有角度1.5的组件。在索引文件中，有来自文档和组件内部的经典标记

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();
    }
}

重要的部分是FB.XFBML.parse（），它可以重新呈现按钮

Answer 6

恕我直言，接受的答案并不是很好的答案。原因如下：

您最终会多次插入脚本。
window.FB = null是更好的语法，而不是FB = null

如果脚本已存在，则不要再次添加-fetch脚本。相反，请手动执行window.FB.XFBML.parse();。

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
       window.FB.XFBML.parse(); // Helps to identify FB elements again.
       return;
    }
    js = d.createElement(s); js.id = id;


    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6"; // Put your Latest version here.
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

FB.XFBML.parse

Answer 7

对于使用选择接受Cookie同意的用户（例如，针对GDPR法），并且需要首次以编程方式激活fb插件：

var loadFB = (function (d, s, id) {
  //- call this function after receiving consent
  return function loadFB() {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (window['FB']) {
      window['FB'].XFBML.parse();
      return;
    }

    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.0';
    fjs.parentNode.insertBefore(js, fjs);
  }
}(document, 'script', 'facebook-jssdk'));

在app.component.ts中：

const onNavigationEnd = this.router.events.pipe(
  filter(event => event instanceof NavigationEnd),
  map((event: NavigationEnd) => {
    // ccService is the cookieConsentService
    if (this.ccService.hasConsented()) {

      // Set Google Analytics
      ga('set', 'page', event.urlAfterRedirects);
      ga('send', 'pageview');

      // Set Facebook sdk
      loadFB();

    }
  })
);

FB Like按钮仅显示一次 - 在我的AngularJS视图的第一次加载时

7 个答案: