Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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 ($).

albell commented Apr 24, 2012

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 commented Apr 24, 2012

@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


dineshcooper commented Jun 24, 2012

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


dineshcooper commented Jun 28, 2012

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

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

dineshcooper commented Apr 23, 2013

better solution can be found here:

Orlagh commented May 19, 2013

Hero. Thank you. Xx

websmith commented Jul 3, 2013

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

thuyvk commented Oct 4, 2013

Thanks! It work for me.

Works perfectly for me.

sbczk commented Nov 23, 2013

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>');

Sudoh commented Dec 11, 2013

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


cont77 commented Mar 23, 2014

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?

bioclef commented May 27, 2014

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

where can i get the APP ID? i want to place in my site,

Ive created with Notepad++ a simple .html file containing your code but when I put the file in browser its empty. I need to use the facebook popup on my website
Also, as previous user asked : where do I find the app id ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment