Facebook Like Box: изменение ширины по jQuery

У меня есть сайт im im building, и я решил, что хочу разместить на нем фейсбук, как ящик на боковой панели. У сайта есть 2 разрешения в зависимости от ширины окна. В зависимости от того, какой css загружен, боковая панель изменит размер.Facebook Like Box: изменение ширины по jQuery

В большой css я хочу, чтобы facebook, как коробка 410px широкий и в маленьком css, я хочу, чтобы facebook, как коробка шириной 200px.

Теперь я не так поразителен с 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'));

Это может помочь ..

Конечно, вы должны иметь яваскрипта SDK загружен .. :)

источник

2011-02-06 13:27:44 simekadam

Javascript SDK? – Daryl

http://developers.facebook.com/docs/reference/javascript/ есть подробное описание, что он делает. Существует некоторый код, который вы должны добавить на свой сайт .. , но у вас есть он уже загружен .. Я думаю, что так .. Это сценарий в вашей голове. Но я не уверен на 100%. :) Что такое функция FB.FBXML? Это сработало? Вы можете попробовать это, если используете Chrome, когда вы нажимаете на проверку элемент, а затем на esc key .. есть консоль, где вы можете запускать некоторый javascript. То же самое касается firebug в firefox – 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

ответ

Смежные вопросы