Question

我正在尝试将动态网址绑定到Facebook页面，就像这样的按钮

<div id="fb-root"></div>
<div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook" 
data-layout="button" data-action="like" data-size="small" data-show-faces="false">
</div>

但似乎facebook在数据实际到来之前获取默认页面链接

https://developers.facebook.com/docs/plugins/like-button#settings

作为替代方案我隐藏了这个直到没有正确加载* ngIf这样的页面

<span *ngIf='brand_overview_detail?.brand?.facebook'>
    <div id="fb-root"></div>
    <div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook" 
    data-layout="button" data-action="like" data-size="small" data-show-faces="false">
    </div>
</span>

但是这个按钮根本没有显示，

该怎么办？任何帮助或提示？

Answer 1

好的，我以一种小巧的方式开始工作：

我使用javascript而不是[attr.data-href]添加data-href然后我包含了Facebook脚本：

在模板中：

<div id="fb-like-btn" class="fb-like"  data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>

在组件中（我使用setInterval来等待元素在DOM上，但那是因为我的实现）：

private _fbLikeIframeSrc(){
  let likeBtn = document.getElementById('fb-like-btn');
  if(likeBtn) {
    clearInterval(this._iframeInterval);
    let page = encodeURIComponent(this.promotion.callsToAction.page);

    likeBtn.setAttribute('data-href', this.promotion.callsToAction.page);
    this._initFbSdk();
  } else {
      this._iframeInterval = setInterval(()=> {
        this._fbLikeIframeSrc()
      }, 100
    );
  }
}

private _initFbSkd() {
  let d = document;
  let s = 'script';
  let id = 'facebook-jssdk';
  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.8&appId=************";
  fjs.parentNode.insertBefore(js, fjs);


}

看哪，按钮就出现了！

在angular2中将动态URL绑定到FB，如Button

1 个答案: