Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@steve-eldridge

steve-eldridge Mar 22, 2012

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

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

This comment has been minimized.

Show comment Hide comment
@albell

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

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

This comment has been minimized.

Show comment Hide comment
@dineshcooper

dineshcooper 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

Owner

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

@simonbarker

This comment has been minimized.

Show comment Hide comment
@simonbarker

simonbarker Jun 22, 2012

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

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

@dineshcooper

This comment has been minimized.

Show comment Hide comment
@dineshcooper

dineshcooper Jun 24, 2012

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

Owner

dineshcooper commented Jun 24, 2012

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

@artifacting

This comment has been minimized.

Show comment Hide comment
@artifacting

artifacting Jun 28, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@steve-eldridge

steve-eldridge Jun 28, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@dineshcooper

dineshcooper Jun 28, 2012

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

Owner

dineshcooper commented Jun 28, 2012

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

This comment has been minimized.

Show comment Hide comment
@steve-eldridge

steve-eldridge Jun 28, 2012

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

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

This comment has been minimized.

Show comment Hide comment
@alexander-sibert

alexander-sibert Sep 7, 2012

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?

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

This comment has been minimized.

Show comment Hide comment
@rlaragon

rlaragon Sep 29, 2012

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

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

@antondileva

This comment has been minimized.

Show comment Hide comment
@antondileva

antondileva Oct 1, 2012

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

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

@resourcemode

This comment has been minimized.

Show comment Hide comment
@resourcemode

resourcemode Jan 29, 2013

You can try this too :)

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

You can try this too :)

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

This comment has been minimized.

Show comment Hide comment
@dineshcooper

dineshcooper Apr 23, 2013

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

Owner

dineshcooper commented Apr 23, 2013

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

@Orlagh

This comment has been minimized.

Show comment Hide comment
@Orlagh

Orlagh May 19, 2013

Hero. Thank you. Xx

Orlagh commented May 19, 2013

Hero. Thank you. Xx

@websmith

This comment has been minimized.

Show comment Hide comment
@websmith

websmith Jul 3, 2013

well done. Thanks for this!

websmith commented Jul 3, 2013

well done. Thanks for this!

@maxelcat1

This comment has been minimized.

Show comment Hide comment
@maxelcat1

maxelcat1 Jul 19, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@thuyvk

thuyvk Oct 4, 2013

Thanks! It work for me.

thuyvk commented Oct 4, 2013

Thanks! It work for me.

@victorngkp

This comment has been minimized.

Show comment Hide comment
@victorngkp

victorngkp Oct 19, 2013

Works perfectly for me.

Works perfectly for me.

@sbczk

This comment has been minimized.

Show comment Hide comment
@sbczk

sbczk 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="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();
    }
}); 

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

This comment has been minimized.

Show comment Hide comment
@Sudoh

Sudoh Dec 11, 2013

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;
}

Sudoh commented Dec 11, 2013

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

This comment has been minimized.

Show comment Hide comment
@axe312ger

axe312ger Dec 17, 2013

@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;
}

@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

This comment has been minimized.

Show comment Hide comment
@aldoanizio

aldoanizio Feb 11, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@cont77

cont77 Mar 23, 2014

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

Any idea why?

cont77 commented Mar 23, 2014

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

Any idea why?

@moikirsch

This comment has been minimized.

Show comment Hide comment
@moikirsch

moikirsch May 26, 2014

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?

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

This comment has been minimized.

Show comment Hide comment
@bioclef

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

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?

@aantamim

This comment has been minimized.

Show comment Hide comment
@aantamim

aantamim Mar 17, 2016

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

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

@oddstake

This comment has been minimized.

Show comment Hide comment
@oddstake

oddstake Sep 22, 2016

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 oddstake.com
Also, as previous user asked : where do I find the app id ?

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