Facebook Like Button Breaks其他社交小工具和錨

我有一個Facebook的按鈕/小部件，微博部件，Google+小部件和一個錨標籤在同一頁上。Facebook Like Button Breaks其他社交小工具和錨

如果Facebook的按鈕被刪除一切正常。

如果顯示Facebook like按鈕，則類似按鈕可以工作，但包括簡單錨定標記的所有其他小部件都不會。

有什麼理由不應該這樣做？

的Facebook SDK經由jquery的異步加載

$('body').prepend('<div id="fb-root"></div>'); 
$.getScript('http://connect.facebook.net/en_US/all.js') 
.done(function(script, textStatus) { 

    // Initialize Facebook javascript SDK. 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : settings.appId, 
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File 
      status  : true, // check login status 
      cookie  : true, // enable cookies to allow the server to access the session 
      xfbml  : true // parse XFBML 
     }); 

     initSocialWidgets(); 
     initFacebookPlugins(); 
    }; 
}) 
.fail(function(jqxhr, settings, exception) { 
});

的widget HTML是插入動態使用jquery。

// Facebook. 
script = '<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>'; 
$('#facebook-widget-container').append(script); 

// Twitter. 
script = '<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="ezoetic">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>'; 
$('#twitter-widget-container').append(script); 

// Google. 
script = '<div class="g-plusone" data-size="medium"></div><script type="text/javascript"> (function() { var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true; po.src = \'https://apis.google.com/js/plusone.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s); })();</script>'; 
$('#google-widget-container').append(script);

來源

2012-02-04 Aydus-Matthew

您是否檢查過控制檯中的JS錯誤？如果您在Chrome上進行測試，請按Ctrl + Shift + I並點擊控制檯。發佈您找到的任何錯誤。 – 2012-02-04 19:44:21

嘗試在$ .getScript（）之前的initSocialWidgets（）// FYI http://techcrunch.com/2012/02/03/facebook-javascript-api-goes-down-taking-down-likes-comments-and-apps -with-it/ – 2012-02-04 19:57:55

沒有控制檯錯誤，移動initSocialWidgets（）函數沒有什麼區別。 – 2012-02-05 02:50:00

這裏的核心問題是fb-like div中的data-width =「450」屬性。

像按鈕寬度爲450px的Facebook覆蓋了該行中的所有其他小部件/錨點。所有其他小部件/錨都會顯示，但無法點擊。

但是，將數據寬度設置爲108px（Like + Send按鈕的測量寬度）也未解決問題。它仍然導致Facebook像按鈕寬度150px。將數據寬度設置爲小於108像素也沒有效果。

最終的解決方案是簡單地添加一個CSS像Facebook按鈕容器。

.product-view #facebook-widget-container { 
    width: 108px; 
    overflow: hidden; 
}

來源

2012-02-05 03:44:55

你只需要運行FB.init()的window.fbAsyncInit回調裏面，否則就不能肯定FB已經由js代碼正確設置。

這可能引發錯誤停止在客戶端的瀏覽器的JavaScript語法分析器，併爲此不運行initSocialWidgets();

調用FB.init（前放上一個簡易的console.log(1);），然後執行console.log（2）緊隨其後，並查看兩個日誌是否都在控制檯中結束。

來源

2012-02-05 01:00:18 DMCS

同意應該將FB.init（）封裝在window.fbAsyncInit函數中。這並沒有解決這個具體問題，但懷疑它會在未來造成問題。已更新問題代碼以反映此問題。 – 2012-02-05 02:49:27

解決！這裏的核心問題是fb-like div中的data-width =「450」屬性。 450px寬度覆蓋其他控件。沒有足夠的積分直接發佈答案，但稍後會發布更多詳細信息。 – 2012-02-05 02:52:17

Facebook Like Button Breaks其他社交小工具和錨

回答

相關問題