public
Last active

Responsive Facebook Like Box

  • Download Gist
responsive_likebox.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<!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>

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

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

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

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

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

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

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

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

Any idea why?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.