CODEWITHSUNDEEP
jqueryfacebookfacebook-like
Daryl
Daryl

Reputation: 380

Facebook Like Box: changing the width by jQuery

I have this site im building and I decided I want to put a facebook like box on it in the sidebar. The site has 2 resolutions depending on window width. Dependant on which css is loaded the sidebar will change size.

In the large css I want the facebook like box 410px wide and in the small css I want the facebook like box 200px wide.

Now im not that amazing with jquery so if anyone could help me out in how to do this I would be really greatful. An example of what I'm looking to do can be seen on http://net.tutsplus.com

I have it like this so far:

    <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');

And i have this in the head

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

Not quite sure what to do here as it's not loading anything.

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>

Here's an update, if you're curious: here it is live: http://thefinishedbox.com

Upvotes: 2

Views: 2669

Answers (2)

Daryl
Daryl

Reputation: 380

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());
    });
});

Upvotes: 0

simekadam
simekadam

Reputation: 7384

I have bit similar problem..But you can solve it lighter:) Have you tried to call this on end of your script?

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

It might help..

Of course you must have the javascript SDK loaded..:)

Upvotes: 2

Related Questions