Facebook的框小部件不識別數據寬度屬性？

我剛纔注意到，Facebook Like Box小部件的數據寬度屬性似乎不起作用。它看起來正在恢復到默認寬度。我在談論的一個例子可以在http://blog.christopherjonesart.com上看到。Facebook的框小部件不識別數據寬度屬性？

這裏是我使用（這是非常標準）的代碼：

<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_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart" data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

我遇到這個問題的幾個網站。這是在Chrome，Firefox，Safari和Internet Explorer中完成的。我最近沒有更新Wordpress或對我的CSS做過任何更改。

幫助？這看起來真的很糟糕。 :-(

來源

2013-06-12 tlhInganHom

現在Facebook已經ROLLBACK他的更改。所以你可以讓你的代碼如前所述。我想你可以像以前一樣回滾你的變化。 CHEERS！ –

我想我們應該告訴FB釐定其啞巴腳本，現在fb的樣箱寬度必須至少292像素。

他們寫明https://developers.facebook.com/docs/reference/plugins/like-box/

的最低支持的插件寬度爲292個像素。

來源

2013-06-12 04:08:19

呃這是什麼時候變化的？它一直在190px巡航，沒有字面上YEARS的問題。愚蠢的Facebook。 – tlhInganHom

我也面臨同樣的問題給你。我的解決辦法是使用jQuery腳本來改變樣箱的寬度類似盒子準備時間。

在頭節

<script type="text/javascript"> 
function JS_wait(){ 
      // wait until like box script load 
    if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){ 

     window.setTimeout(JS_wait, 100); 
    }else{ 
        // wait 5 seconds to like box rendered. 
     window.setTimeout(JS_ready, 5000); 
    } 
} 

function JS_ready() { 

    // resize facebook like box to 200 px 
    //alert("JS_ready"); 
    $("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px'); 
    $("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200'); 
    $("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px'); 
}; 
</script>

和文件準備添加

<script type="text/javascript"> 
$(document).ready(function() { 
     JS_wait(); 
    }); 
</script>

乾杯這一定幫助你。

來源

2013-06-12 05:01:11 Piti

謝謝！我會試試這個。 – tlhInganHom

我修正了一點點CSS的寬度，但它只是暫時的。我的黑客是這樣的：

.fb-like-box iframe { 
    width: your_width_in_px !important; 
}

來源

2013-06-12 06:52:54 user2477225

擴展在user2477225的答案，它可能有您設置自定義的定位問題（相對或網頁上的某個地方絕對的），所以我所做的就是：

.fb_iframe_widget>span { width: 240px !important; } 
.fb-like-box iframe { width: 240px !important; }

似乎到目前爲止工作。

編輯：對於IE 8（或更低），請改用此：

.fb_iframe_widget span { width: 240px !important; } 
.fb-like-box iframe { width: 240px !important; }

我喜歡儘可能具體，在我的選擇，但檢查這個問題上多一些之後，我看到沒有技術原因在這裏使用>選擇器。

來源

2013-06-12 07:49:14 Ynhockey

謝謝。一開始工作完美。 –

的FB後：likebox 添加這個腳本的244px更改爲寬度

FB.Event.subscribe('xfbml.render', function(response) { 

var el = document.querySelector(".fb_iframe_widget span"); 
el.style.width='244px'; 
el = document.querySelector(".fb_iframe_widget iframe"); 
el.style.width='244px'; 
});

來源

2013-06-12 10:14:09 mourmouris

使用iframe的設置，在我的網站使用iframe的設置與236px寬的likebox和它否決292px的寬度。 FB的無腦思維，每個站點都需要一個292px寬度的邊欄？yeye

來源

2013-06-12 14:59:46

根據Facebook official like box page，最小寬度爲292px。

還有，a little project on github可以讓臉書如框響應並適應您的網站佈局。

應用此與容器的寬度設置爲您願意將迫使樣箱的Facebook來填補容器和適應它的寬度，沒有多，不會少任何寬度沿：

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */ 
#fb-root { 
    display: none; 
} 

/* To fill the container and nothing else */ 
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { 
    width: 100% !important; 
}

來源

2013-06-12 15:41:45

這是我用來修復它的地方，這不是完全一樣的，因爲我沒有顯示面孔，只是適應你的代碼，重要的部分是我添加的div＃fb-like-container，它讓我使用css選擇器來更改所需的代碼。

CSS：

<script> 
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{ 
    width: 173px!important; 
} 
</script>

HTML（數據寬度不考慮）：

<div id="fb-like-container"> 
    <div class="fb-like-box" 
    data-href="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false"> 
    </div> 
</div>

來源

2013-06-13 17:42:36 Yann

簡單地使用iFrame而不是fbml和變動幅度到任何需要。下面

i.e.:(width:194px）

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe>

謝謝！

來源

2013-06-17 06:53:11

Facebook的框小部件不識別數據寬度屬性？

回答

相關問題