Can I dynamically resize the Facebook Activity Stream plugin?

I'm using the html5 embed code for the Activity Feed as documented here:

htt开发者_高级运维p://developers.facebook.com/docs/reference/plugins/activity/

I'd like the Facebook Activity Stream to "fill" it's enclosing box. This enclosing box is resizable, so I'd need to resize that activity stream when the enclosing box is resized.

Activity Feed plugin use an iframe for rendering and it is not possible to resize it with pure CSS. However with javascript you can resize the plugin by reloading the iframe with the correct height as a parameter. It is a faster method then parsing again the XFBML tag.

CSS (to make sure the plugin elements follow the container size)

.fb-activity, .fb-activity * {
    position:relative !important;
    width:100% !important;
    height:100% !important;
}

Javascript (using jQuery)

$(window).resize(function() {

    //Calculate the new height of your container
    //...

    var $container = $('.container');
    var $iframe = $container.find('iframe');
    $container.css('height',containerHeight+'px');
    if($iframe.length) {
        $iframe.attr('src',$iframe.attr('src').replace(/height=[0-9]+/gi,'height='+escape(containerHeight)));
    } else {
        $container.find('.fb-activity').attr('data-height',containerHeight);
    }
});