綁定動態URL到FB像按鈕在angular2

我試圖動態URL綁定到Facebook頁面像按鈕這樣綁定動態URL到FB像按鈕在angular2

<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

作爲複用I隱藏此，直到頁不與* 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>

但在這個按鈕被完全無法顯示，

怎麼辦？任何幫助或提示？

來源

2016-12-29 Pardeep Jain

按鈕沒有顯示出來嗎？ 'brand_overview_detail？.brand？.facebook'的價值是什麼？此外，小錯字，在'* ngIf'中使用雙引號。 – Chybie

'brand_overview_detail？.brand？.facebook'是有效的Facebook網頁網址，'single'或'double' quoto也有什麼區別？ –

所以你很確定'brand_overview_detail？.brand？.facebook'有價值嗎？例如像這樣顯示它{{brand_overview_detail？.brand？.facebook}}'有價值嗎？ – Chybie

好吧，我得到它的工作，在一個小hackie方式：

我加入數據HREF與JavaScript不與[attr.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); 


}

並且看，像按鈕出現！

來源

2017-01-21 05:05:59

綁定動態URL到FB像按鈕在angular2

回答

相關問題