Facebook Like Box：通过 jQuery 更改宽度

发布于 2024-10-16 03:04:07 字数 2303 浏览 2 评论 0原文

我正在构建这个网站，我决定在侧边栏中放置一个类似 facebook 的框。该网站有 2 种分辨率，具体取决于窗口宽度。根据加载的 CSS，侧边栏的大小将会改变。

在大型 css 中，我想要 facebook like 框 410px 宽，在小 css 中，我想要 facebook like 框 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>

不太确定在这里做什么，因为它没有加载任何东西。

编辑：

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2024-10-23 03:04:07

我有一些类似的问题..但是你可以更轻松地解决它:)你是否尝试过在脚本末尾调用它？

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

它可能会有所帮助..

当然你必须加载 javascript SDK..:)

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..:)

回复收藏 0 原文

听不够的曲调 2024-10-23 03:04:07

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

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

回复收藏 0 原文

~没有更多了~