Skip to content

@dineshcooper /responsive_likebox.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Responsive Facebook Like Box
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="https://www.facebook.com/adobegocreate" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<div id="fb-root"></div>
<script>
/*
* REMEMBER TO CHANGE TO YOUR APP ID AND CHANGE data-href TO SUIT YOU
*/
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=ADD YOUR APP ID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#container').width();
$('#container').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate"' +
' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse( );
});
</script>
</body>
</html>
@steve-eldridge

Thanks for great code. This absolutely works, made some modifications to include in Wordpress header by enqueuing jQuery and adding the jQuery calls to the replace the ($).

@albell

Awesome. Thanks a lot. Two quick questions:

1) What is the idea behind 'data-height="730"' in line 30? Why? There's no height set in line 9.
2) Why use the plus at the end of line 30? Is that just stylistic, or is there a practical reason? Just curious...

@dineshcooper

@steve-eldridge Thanks

@baloneysandwiches valid questions :)
1) the data-height does not need to be there in line 30
I think I put it in there when I was testing whether data-height actually works.

2) no practical reason - I should have been capping my lines off at column 80
as per good coding standards but this must have been pretty late at night
since I didn't bother earlier on in the code AND line 30 is 89 chars long - LOL

Hope that answers your questions

@simonbarker

Works like a dream, I'm looking to expand this to allow multiple sets of comments on a feed that is responsive

@dineshcooper

@simonbarker that will be great - wanted to do a jQuery plugin just not getting the time ;)

@artifacting

Thanks for the code. Would there be a way to change line 29 to make it variable? I would like to add more than one facebook page's likebox to my site. Thanks again.

@steve-eldridge

You have a Div (#container) on line 28, copy the whole instruction down to 31 (;) and paste it on line 32 with a new Div id (#newContainer) and change the URL to the second likebox. Should work.

@dineshcooper

While looking at how one would make this script handle multiple plugins -
I ran across this http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins

The reply that is set as the correct answer didn't work for me however the reply by Sergiu Octavian did after changing it
to match the class name I have in the gist.

This is cool css only solution - I have a jsfiddle up at http://jsfiddle.net/dineshcooper/9YGVY/2/
tested in latest FF/Chrome/IE9

@steve-eldridge

Excellent solution and nicely responsive. This is a very good solution, I'll keep this one handy for the next time I have to put in a "like box".

@alexander-sibert

I have on http://www.neofelis.de the old edition fanbox with specific CSS style. I tried the CSS codes with width: 100% !important, but it works not. Have anyone a idea or solution?

@rlaragon

Thanks really, I was around the right solution but yours is really fine.

@antondileva

Is there anyway to set the height to 50% of the width? if so how? cheers.

@resourcemode

You can try this too :)

.fb-like-box { width: 100% !important; height:100% !important; border:none; /*overflow:hidden;*/ }
@dineshcooper

better solution can be found here: https://gist.github.com/smeranda/2571173

@Orlagh

Hero. Thank you. Xx

@websmith

well done. Thanks for this!

@maxelcat1

Sorry, this is exactly what I want but I can't work out what the App ID in this line is:

js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=ADD YOUR APP ID HERE";

Here is the line in my code provided by FB
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";

Where do I find the App ID please?

Also it doesn't work - the scroll bar is outside the width - perhaps it will if I can get the app id???

Thanks in advance

@thuyvk

Thanks! It work for me.

@victorngkp

Works perfectly for me.

@tomaszsobczak

Just to make performance a bit more better i added simple check that container width really changed as resizing browser window does not mean that our container width also changed

var container_width_current = $('#container').width();

$(window).bind("load resize", function(){    
    var container_width_new = $('#container').width();

    if (container_width_new != container_width_current) {
        container_width_current = container_width_new;

        $('#container').html('<div class="fb-like-box" ' +
        'data-href="https://www.facebook.com/adobegocreate" ' +
        'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
        'data-stream="true" data-header="true"></div>');
        FB.XFBML.parse();
    }
}); 
@Sudoh

The following CSS will work just fine as well (without the need for jQuery):

.fb-like-box,
.fb-like-box span,
.fb-like-box span iframe[style] {
    width: 100% !important;
}
@axe312ger

@Sudoh: Thanks!

I've updated your code to make it work with more widgets than the like-box:

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  width: 100% !important;
  min-width: 200px;
}
@aldoanizio

Another solution without use Javascript inside HTML is this. This wrap all boxes inside document wich have "fb-like-box" class and change "data-width" attribute and preserve other attributes:

// Activate FB Js SDK
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Wrap all Boxes and resize
$(window).bind("load resize", function()
{
    $('.fb-like-box').each(function()
    {
        // Change 'data-width' attribute
        $(this).attr('data-width', $(this).parent().width());

        FB.XFBML.parse();
    });
});
@cont77

The script doesn't work with jquery-migrate-1.2.1.min.js

Any idea why?

@moikirsch

On the iPhone in portrait mode if there is an image it doesn't resize correctly and the width ends being wider.

Has anyone else had this problem? Does anyone know a workaround?

@bioclef

@aldoanizio how can I do it with your method? So, to which file do I paste the code, and what additional script do I need?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.