如何讓facebook社交插件充分響應

我在我的網站上爲開發者使用Facebook社交插件。它對手機和平板電腦沒有反應我跟着幾個StackOverflow的答案，但仍然無法解決我的問題。我有一個內容行和一個span6類，其中放置了我的小部件。如何讓facebook社交插件充分響應

我的HTML就是這樣。

<div class="row content_row"> 
<div class="span6"> 
<div class="Facebook"> 
<h2><a id="about_us">Facebook</a></h2> 
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div> 
</div> 
</div>

我做了一些應用CSS從其他的答案，但它也失敗了。

的CSS：

.fb-page, .fb-page iframe[style], .fb-page span { 
min-width: 100% !important; 
width: 100% !important; 
}

來源

2016-01-13 Ammar Ul Hassan

Facebook的社交插件大部分沒有真正的響應。除了他們提供的配置選項之外，您可以做的事情很少。對於頁面插件，它是正式記錄的，它只會適應頁面加載時的容器大小，但如果窗口被調整大小，則不會動態調整（https://developers.facebook.com/docs/plugins/page-plugin ＃adaptive-width）如果你真的需要後者，那麼你必須建立你自己的resize處理程序腳本，在必要時重新加載插件。 – CBroe

我的容器總是100％的寬度的屏幕，但我不知道爲什麼FB小部件不按照其寬度。 –

你需要調用FB頁分度，新的數據的寬度和調用函數「FB.XFBML.parse（）;」每一次，當網站的大小調整。因此JavaScript可以幫助這個問題：

<div class="row content_row"> 
    <div class="span6"> 
    <div class="Facebook"> 
     <h2><a id="about_us">Facebook</a></h2> 
     <div class="facebook-wrap"> 
     <div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div> 
     </div> 
    </div> 
    </div> 
</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_US/sdk.js#xfbml=1&version=v2.2"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
    $(function(){ 
    $(window).resize(function(){ 
     $('.facebook-wrap').html('<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-width="'+$('.facebook-wrap).width()+'" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div>'); 
     FB.XFBML.parse(); 
    }); 
    }); 
</script>

來源

2016-01-13 10:01:27

我試過你的答案，但它不工作罰款有時給正確的結果，但在頁面加載一些時候它失敗 –

（'。'）; $（function（））使用$（window）.resize（function（）中的腳本並且也不帶.resize（function（）： –

限制

使用CSS3轉換

組數據調整容器寬度=「假」（或出事了500像素下）

此fb-plugin設置爲500x500

<script src="jquery.rwd-fb-plugin.js"></script> 

<!--FB-page-plugin part1--> 
<div id="fb-root"></div> <script>(function(d, s, id) { ... } </script> 

<!--FB-page-plugin part2--> 
<div class="fb-page"> ... </div> 

$(function(){ 
    $('.fb-page').rwd(); 
});

演示：RWD-fb-plugin

來源

2016-03-06 16:49:35 Kuofp

如何讓facebook社交插件充分響應

回答

相關問題