Fluid like box?

Question

I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.

I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:

<fb:fan> requires one of the "id" or "name" attributes.

So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?

Evaporite

Answer 1

You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!

$(document).ready(function(){   
    var fbWidth;

    function attachFluidLikeBox(){
        // the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
        var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();

        // the containing element in which the Likebox resides
        var container = $('#likebox');  

        // we should only redraw if the width of the container has changed
        if(fbWidth != container.width()){
            container.empty(); // we remove any previously generated markup

            fbWidth = container.width(); // store the width for later comparison

            fbml = fbml.split('WIDTH').join(fbWidth.toString());    // insert correct width in pixels

            container.html(fbml);   // insert the FBML inside the container

            try{
                FB.XFBML.parse();   // parses all FBML in the DOM.
            }catch(err){
                // should Facebook's API crap out - wouldn't be the first time
            }
        }
    }

    var resizeTimeout;

    // Resize event handler
    function onResize(){
        if(resizeTimeout){
            clearTimeout(resizeTimeout);
        }

        resizeTimeout = setTimeout(attachFluidLikeBox, 200);    // performance: we don't want to redraw/recalculate as the user is dragging the window
    }

    // Resize listener
    $(window).resize(onResize);

    // first time we trigger the event manually
    onResize();
});

What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.

Evaporite

Javascript to make something responsive... Yeah... Can't say that makes me warm inside. – Hellish

The Facebook like box itself requires JavaScript, so I don't see a problem here. – Snick

This works well, but the right border of the box seems to get cutoff. – Psychopathy

Answer 2

I found this Gist today and it works perfectly: https://gist.github.com/2571173

/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */

/* This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. */

#fb-root {
  display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

Worked

That's actually not a good solution, since you pass a width to the facebook iframe so it can decide how much content to load and stack etc. This solution will crop too (inside the iframe). – Hellish

I have tested it on a 7" tablet and a regular 2.3 Android HTC phone. Works as expected. Fits just right with Twitter Bootstrap in portrait and landscape modes. – Buffybuford

Answer 3

Much has changed since the OP.

By simply choosing iFrame and setting your width to 100%, your FB Like Box should be responsive.

Basically FB adds this to the iFrame:

style="border:none; overflow:hidden; width:100%; height:300px;". 

Keheley

Answer 4

Been struggling with the exact same problem. A quick & simple solution is to use the iframe based Facebook Like box.

<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Note the assigned 'fb-like-box' class and all the removed inline styles. The class for the iframe could look something like this:

.fb-like-box {
  width: 100% !important;
  height:500px;
  border:none; 
  overflow:hidden;
}

Looks like it doesn't matter what the height and width are that are defined in the iframe's src tag. Just place the iframe into some fluid element like a cell in a CSS grid layout.

(includes ideas from: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)

Anamorphosis

Perfect! This works! the only downside seems to be that images inside that box don't get resized. – Cockade

Answer 5

I used the HTML5 version of Facebook Like Box and here is what worked for me:

.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width:100% !important;
}

Chanteuse

Answer 6

You cannot set the like-box to anything other than a pixel width. My suggestion is to place it in a DIV or SPAN that is fluid with overflow set to hidden. Sure, it's going to crop off part of the like-box, but by having the requirement of fluid, this is your best bet.

Brucie

Sorry, but cropping would be unacceptable. I'll look for a javascript workaround. – Evaporite

If cropping is unacceptable, then there is no solution. Your javascript cannot talk to facebook's iframe code. If your javascript could, then that'd be a HUGE security hole that would be patched by Facebook in seconds! – Brucie

I'm well aware of cross-domain javascript limitations. I was thinking along the lines of dynamically removing and re-adding the Like Box when the browser window changes sizes. – Evaporite

Answer 7

Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.

$(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'>
            </div></div>");
        });

Sazerac

Answer 8

The comment above from Ed and Matthias about using 100% for the iframe worked great for me. Here is my iframe code

ORIGINAL WITHOUT FIX:

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;" 
allowTransparency="true"></iframe>

UPDATED WITH 100% FIX:

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;width:100%" 
allowTransparency="true"></iframe>

The only change is adding "width:100%" to the style attribute of the iframe

note that the code above has "XXXXXXXXXX" in place of the unique references

Tarter