将动态网址绑定到FB，如Button2中的Button [英] Binding Dynamic URL to FB like Button in angular2

问题描述

 < div id =fb-root >< / DIV> 
< div class =fb-like[attr.data-href] =brand_overview_detail？.brand？.facebook
 data-layout =buttondata-action =likedata -size =smalldata-show-faces =false> 
< / div> 
  

但是，在数据实际按照这些文档之前，Facebook会默认页面链接

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

作为替代我隐藏此直到页面无法正常加载* ngIf像这样

 < span * ngIf ='brand_overview_detail？.brand？ > 
< div id =fb-root>< / div> 
< div class =fb-like[attr.data-href] =brand_overview_detail？.brand？.facebook
 data-layout =buttondata-action =likedata -size =smalldata-show-faces =false> 
< / div> 
< / span> 
  

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

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

解决方案

好的，我以一种小黑客的方式工作：

我添加的数据href与javascript不是与[attr.data-href]，然后我包括Facebook脚本：

在模板中： / p>

 < div id =fb-like-btnclass =fb-likedata-layout =buttondata -action =likedata-size =largedata-show-faces =falsedata-share =false>< / div> 
  

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

  private _fbLikeIframeSrc（）{
 let likeBtn = document.getElementById（'fb样-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）; 
 
 
} 
  

看到类似的按钮出现！

I am trying to bind Dynamic URL to facebook page like button like this

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

But seems facebook gets default page link before data is coming actually as per documentation here

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

as an alternate i hide this untill page is not loaded properly with *ngIf like this

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

But in this button is not showing at all,

what to do ? any help or tip ?

解决方案

Ok, I got it to work, in a little hackie way:

I am adding the data-href with javascript not with [attr.data-href] and then I include the Facebook script:

in the template:

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

In the component (I am using a setInterval to wait for the element to be on the DOM, but that is because of my implementation):

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


}

and behold, the like button appears!

这篇关于将动态网址绑定到FB，如Button2中的Button的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！