Facebook Like Box：jQueryで幅を変更する

私はこのサイトをビルドしており、サイドバーにそのようなFacebookのようなフェイスブックを置きたいと決めました。このサイトには、ウィンドウの幅に応じて2つの解像度があります。どのCSSが読み込まれているかによって、サイドバーのサイズが変わります。Facebook Like Box：jQueryで幅を変更する

大規模なCSSでは、幅が410pxのようなfacebookを希望し、小さなCSSでは200pxの幅のようなfacebookが欲しいです。

ここではjqueryですごく驚いていないので、誰かがこれを行う方法で私を助けることができたら、私は本当に素晴らしいでしょう。私はしているよ何の例は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>

ないかなりそれは何もロードされていないので、ここで何をすべきか確かめてください。

EDIT：あなたが興味があれば

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コードの兆候はありません...また、 '

'オブジェクトが必要です... –

@ Maximilian Ehlersそれをサイドバーに貼り付けてもうまく動作します。問題は、ブラウザのサイズに依存してかなりリロードする必要があることです。 – Daryl

私はあなたが軽くそれを解決することができます少し似problem..Butを持っている:)あなたを持っていますあなたのスクリプトの最後にこれを呼び出そうとしましたか？

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

それはあなたがロードされたJavaScript SDKを持っている必要があります。もちろん、...

を助けるかもしれない... :)

出典

2011-02-06 13:27:44 simekadam

Javascript SDK？ – Daryl

http://developers.facebook.com/docs/reference/javascript/ 詳細な説明があります。あなたのサイトに追加する必要のあるコードがあります。しかし、あなたは既にそれをロードしています。私はそう思っています。あなたの頭の中のスクリプトです。しかし、私は100％確信していません:) FB.FBXMLの機能は何ですか？それはうまくいきましたか？あなたはinspectをクリックすると、あなたはいくつかのjavascriptを実行することができるコンソールです。firefoxのfirebugについても同じです – simekadam

ブラウザの幅に応じてまだサイズを変更していません：/ – Daryl

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で幅を変更する

答えて

関連する問題