Facebook Like Box：通過jQuery改變寬度

我有這個網站即時通訊建設，我決定我想在Facebook上放一個類似框的框。該網站根據窗口寬度有兩種分辨率。根據加載哪個CSS，側邊欄將更改大小。Facebook Like Box：通過jQuery改變寬度

在大css中，我希望facebook像框410px寬，在小css中，我希望像框200px寬的facebook。

現在即時通訊不是那麼令人驚訝，所以如果任何人都可以幫助我如何做到這一點，我會非常感激。什麼我希望做一個例子可以http://net.tutsplus.com

可以看到我有這樣的迄今：

<div class="block facebookLikeBox"> 

    </div> 

    $(window).resize(function(){ 
    if ($(window).width() > 1200) { 
     $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>'); 
     } 
    } 
    else { 
     $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>'); 
    } 
}).trigger('resize');

和我說的頭

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

不太確定在這裏做什麼，因爲它沒有加載任何東西。

編輯：

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width > 1024) { 
     $('#sidebar .tip').addClass('vertical'); 
     $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>'); 
     FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox')); 
    } else { 
     $('#sidebar .tip').removeClass('vertical'); 
     $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>'); 
     FB.FBXML.parse(document.getElementsByClassName('.facebookLikeBox')); 
    } 
} 

$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
     adjustStyle($(this).width()); 
    }); 
}); 



<head><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script></head>

這裏有一個更新，如果你很好奇：這裏是現場：http://thefinishedbox.com

來源

2011-02-06 Daryl

你有你的FB-應用程序的連接？沒有那個js代碼的標誌...它也需要`

`對象... – 2011-02-06 13:14:57

@Maximilian Ehlers它工作正常，如果我只是將其粘貼到邊欄中，我確實已將它連接起來。問題是我需要它來根據瀏覽器大小重新加載自己：| – Daryl 2011-02-06 13:25:23

我有幾分相似problem..But你可以解決它更輕:)你有沒有試圖在你的腳本結束時調用它？

FB.XFBML.parse(document.getElementsByClassName('.facebookLikeBox'));

它可以幫助..

當然，你必須要有的JavaScript SDK中加載.. :)

來源

2011-02-06 13:27:44 simekadam

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width > 1200) { 
     $('#sidebar .tip').addClass('vertical'); 
     if (!$.browser.msie) { 
      $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="410" show_faces="true" stream="false" header="true"></fb:like-box>'); 
      FB.XFBML.parse(); 
     } 
    } else { 
     $('#sidebar .tip').removeClass('vertical'); 
     if (!$.browser.msie) { 
      $('.facebookLikeBox').html('<fb:like-box href="http://www.facebook.com/pages/TheFinishedBox/191240420888444" width="200" show_faces="true" stream="false" header="true"></fb:like-box>'); 
      FB.XFBML.parse(); 
     } 
    } 

} 

$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
     adjustStyle($(this).width()); 
    }); 
});

來源

2011-02-07 20:35:02 Daryl

Facebook Like Box：通過jQuery改變寬度

回答

相關問題