如何創建可調整大小的「like」框？

我爲nbglive.com創建的likebox無法調整大小，無論使用什麼方法，因此，如何將它與我們的網站集成而不會與廣播播放器重疊，這會造成很大的麻煩。如何創建可調整大小的「like」框？

當頁面大小調整時，是否可以調整相似框的大小？我正在使用twitter-bootstrap。

2013-03-18 RolandiXor

我把FB部件（likebox和註釋）爲引導的網格是這樣的：

<div class="span4"> 
    <div style="text-align: center;"> 
    <div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div> 
    </div> 
</div>

其中url是包含的網頁URL的變量FB頁面。

與CSS：

div.fb-like-box, 
div.fb-like-box > span, 
div.fb-like-box > span > iframe[style], 
div.fb-comments, 
div.fb-comments > span, 
div.fb-comments > span > iframe[style] { 
    width: 100% !important; 
}

Facebook的異步加載它的組件具有根據width數據屬性設置樣式。我將它設置爲一些安全值：看起來很糟糕，但不會溢出到不同視圖端口的其他元素。我的CSS覆蓋了調整窗口小部件所需的所有FB的寬度設置（我設置了100%，因此它調整爲包含div）。它沒有記錄，並可能會停止工作，當FB更改他們的設計，所以明智地選擇您的默認寬度（234px）;）

Example LikeBox的在右側面板的底部和側邊欄。請注意當您更改瀏覽器窗口大小時的響應行爲。

來源

2013-03-18 08:41:55

這裏有一個簡單的方法：

$(".fb-like-box").attr("data-width", $(document).width());

來源

2013-03-18 02:17:42 Marcelo

這似乎並不工作給出：「（ – RolandiXor 2013-03-18 02:49:38

它不會工作，因爲它是在將小部件下載到'iframe'時被FB init腳本讀取的，並且以後不會使用。要獲得響應的小部件，必須在加載的'iframe'中更改樣式。 – 2013-03-18 08:44:19

根據您的CSS如下

<div class="comment-box"> 
     <div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div> 

</div><!--comment-box-->

切做你的盤帶和複製Java的腳本FB裏叫頭

來源

2014-08-14 12:03:46 ScriptFolder

如何創建可調整大小的「like」框？

回答

相關問題