FB類似按鈕顯示在頁面上，但不在同一頁面上彈出

Question

很久以前創建了一個腳本，該腳本運行得很好，直到前一天我注意到此問題。 FB like按鈕顯示在實際頁面上並且可以正常工作...然后，我在頁面上還有一個共享按鈕，其中顯示了一個與其他共享服務一起彈出的窗口...在此彈出窗口中，我還顯示了SAME fb like按鈕。

頁面和彈出位置均使用完全相同的代碼：

<div class="fb-like" data-href="'+ encodeURL(fb_url()) +'" data-action="'+ settings.fbAction +'" data-colorscheme="'+ settings.fbcolorscheme +'" data-send="false" data-layout="button_count" data-width="97" data-show-faces="false"></div>

變量和函數正確。 這在實際頁面上可以正常工作，並且在頁面和彈出窗口上都可以正常工作直到最近...所以我想我的問題是，是否發生了某些更改，您只能在頁面上顯示相同按鈕的一個實例？ 這是我唯一能想到的，但是想知道是否還有其他人遇到過類似的情況。 我很困惑，因為直到最近相同的代碼才出現問題。

Answer 1

實際上，可以在同一HTML文檔中使用相同的data-href值呈現多個類似的按鈕。 像這樣加載Facebook Javascript SDK之前，請檢查您的<div class="fb-like"/>元素是否是DOM的一部分：

<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

請注意，如果您包括YOUR_APP_ID並設置了xfbml=1 （根據上述示例中類似查詢字符串的附錄），則在完成SDK加載后將顯示“贊”按鈕。 在此之后添加的任何“贊”按鈕將不會呈現（例如，如果它們是通過Javascript，jQuery或類似方法添加到DOM的，例如在AJAX調用之后）。

如果必須在加載SDK之后將第二個Like按鈕添加到DOM，則在添加到DOM之后調用FB.init()將呈現任何尚未渲染的Like按鈕，如下所示：

FB.init({
    appId:'YOUR_APP_ID', 
    xfbml:true
});

當心：此方法有效，但不建議這樣做，因為以下警告消息將打印到您的控制台：

FB.init已被調用-這可能表示問題。