Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Responsive Facebook Like Box
<!DOCTYPE html>
<script src="//" type="text/javascript"></script>
<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "// 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=""' +
' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse( );

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 ($).


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


@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


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


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


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.


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.


While looking at how one would make this script handle multiple plugins -
I ran across this

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
tested in latest FF/Chrome/IE9


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".


I have on 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?


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


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


You can try this too :)

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

better solution can be found here:


Hero. Thank you. Xx


well done. Thanks for this!


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

js.src = "// YOUR APP ID HERE";

Here is the line in my code provided by FB
js.src = "//";

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


Thanks! It work for me.


Works perfectly for me.


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="" ' +
        'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
        'data-stream="true" data-header="true"></div>');

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

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

@Sudoh: Thanks!

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

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

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); = id;
    js.src = "//";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

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


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

Any idea why?


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?


@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.