Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Flexible width layout for Facebook Like Box/Activity Stream to use in Responsive Designs
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
@graphicalforce

This comment has been minimized.

Show comment Hide comment
@graphicalforce

graphicalforce May 29, 2012

I'm having trouble getting this to work. What settings should we be using when getting the code from developers.facebook.com?

Thanks

I'm having trouble getting this to work. What settings should we be using when getting the code from developers.facebook.com?

Thanks

@smeranda

This comment has been minimized.

Show comment Hide comment
@smeranda

smeranda May 29, 2012

Nothing specific of which I'm aware. Make sure the parent element is setup with a width.

Owner

smeranda commented May 29, 2012

Nothing specific of which I'm aware. Make sure the parent element is setup with a width.

@graphicalforce

This comment has been minimized.

Show comment Hide comment
@graphicalforce

graphicalforce May 29, 2012

So I'm using this in a wordpress text widget. What should I wrap the facebook code in? Does it need an id or class? Just not quite sure I understand how to use it.

So I'm using this in a wordpress text widget. What should I wrap the facebook code in? Does it need an id or class? Just not quite sure I understand how to use it.

@Chaser324

This comment has been minimized.

Show comment Hide comment
@Chaser324

Chaser324 Jun 21, 2012

Thanks, duder. This is a very clean and simple solution to a problem that a lot of people tend to resort to unnecessary javascript to circumvent.

Thanks, duder. This is a very clean and simple solution to a problem that a lot of people tend to resort to unnecessary javascript to circumvent.

@questulent

This comment has been minimized.

Show comment Hide comment
@questulent

questulent Oct 15, 2012

Thanks so much for this - a real timesaver :)

Thanks so much for this - a real timesaver :)

@pixelnourish

This comment has been minimized.

Show comment Hide comment
@pixelnourish

pixelnourish Dec 5, 2012

Just found this - works perfectly. Thank you very much :)

Just found this - works perfectly. Thank you very much :)

@mikfrench

This comment has been minimized.

Show comment Hide comment
@mikfrench

mikfrench Jan 8, 2013

Hi there,

I'm using this and it's working great on every browser I've tested. The only time I'm having a problem is when I switch to an iPad. any idea what might be causing the problem on an iPad? The page in question is http://www.prwebster.com/nsfarms/why/

Thanks so much.

Hi there,

I'm using this and it's working great on every browser I've tested. The only time I'm having a problem is when I switch to an iPad. any idea what might be causing the problem on an iPad? The page in question is http://www.prwebster.com/nsfarms/why/

Thanks so much.

@prodsea

This comment has been minimized.

Show comment Hide comment
@prodsea

prodsea Feb 1, 2013

I am having trouble in setting up facebook like box for my mobile, camera, laptop price comparison website http://www.prodsea.com ... can anybody please help me on this

prodsea commented Feb 1, 2013

I am having trouble in setting up facebook like box for my mobile, camera, laptop price comparison website http://www.prodsea.com ... can anybody please help me on this

@marcosanchez

This comment has been minimized.

Show comment Hide comment
@marcosanchez

marcosanchez Mar 6, 2013

Hi, I have the same situation as mikfrench. I tried the gist on this site: http://www.edutec2013.ac.cr and works on most browsers. Works fine on: Galaxy S3 with Chrome, Firefox and default browser; Nexus 7 with Chrome and Firefox. On iPad mini and iPad 2 Safari and Chrome, the Facebook like box resizes bigger when finishes loading. And in Opera Mini on iPad 2 it is bigger, but is cuted. I hope this information could help someone.

Hi, I have the same situation as mikfrench. I tried the gist on this site: http://www.edutec2013.ac.cr and works on most browsers. Works fine on: Galaxy S3 with Chrome, Firefox and default browser; Nexus 7 with Chrome and Firefox. On iPad mini and iPad 2 Safari and Chrome, the Facebook like box resizes bigger when finishes loading. And in Opera Mini on iPad 2 it is bigger, but is cuted. I hope this information could help someone.

@diogoca

This comment has been minimized.

Show comment Hide comment
@diogoca

diogoca Mar 7, 2013

tnks for tip...

diogoca commented Mar 7, 2013

tnks for tip...

@responsive-cms

This comment has been minimized.

Show comment Hide comment
@responsive-cms

responsive-cms Mar 13, 2013

Perfect! Thx so much for this! :-)
Now the fb-like-box seems to be 100% fluid / responsive. Will test it on several devices.

Perfect! Thx so much for this! :-)
Now the fb-like-box seems to be 100% fluid / responsive. Will test it on several devices.

@jack-fu

This comment has been minimized.

Show comment Hide comment
@jack-fu

jack-fu Apr 4, 2013

To mikfrench and marcosanchez I'm having the same problem with Ipod, where FB renders bigger but only in portrait mode. In landscape mode it's 100%. Could it be that it's seeing the landscape mode (480px) as the width of the browser and rendering it that way even in portrait mode? When I put an "@media (max-width: 480px)" CSS style, I can control it on Ipod and have it rendered smaller. But still can't render it 100% on both landscape and portrait. Hope that helps, if anyone has a solution, please let me know. Thanks.

jack-fu commented Apr 4, 2013

To mikfrench and marcosanchez I'm having the same problem with Ipod, where FB renders bigger but only in portrait mode. In landscape mode it's 100%. Could it be that it's seeing the landscape mode (480px) as the width of the browser and rendering it that way even in portrait mode? When I put an "@media (max-width: 480px)" CSS style, I can control it on Ipod and have it rendered smaller. But still can't render it 100% on both landscape and portrait. Hope that helps, if anyone has a solution, please let me know. Thanks.

@bloqhead

This comment has been minimized.

Show comment Hide comment
@bloqhead

bloqhead May 28, 2013

Works like a charm for me but I haven't tested on iDevices yet. Thanks for this. I wish Facebook would make something that works out-of-box for responsive needs.

Works like a charm for me but I haven't tested on iDevices yet. Thanks for this. I wish Facebook would make something that works out-of-box for responsive needs.

@mfarinelli

This comment has been minimized.

Show comment Hide comment
@mfarinelli

mfarinelli May 29, 2013

mikfrench, marcosanchez and jack-fu, did you guys find a solution for that on Ipad? I'm facing the same issue right now.

mikfrench, marcosanchez and jack-fu, did you guys find a solution for that on Ipad? I'm facing the same issue right now.

@eomonteiro

This comment has been minimized.

Show comment Hide comment
@eomonteiro

eomonteiro Jun 1, 2013

.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{ min-width:280px;width: 100% !important;}
.fb-like-box iframe[style]{min-width:280px;width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{min-width:280px;width: 100% !important;}
.fb-like-box iframe span[style]{min-width:280px;width: 100% !important;}
.-cx-PRIVATE-pluginBoxContainer__border{ border:none}

work for me

.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{ min-width:280px;width: 100% !important;}
.fb-like-box iframe[style]{min-width:280px;width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{min-width:280px;width: 100% !important;}
.fb-like-box iframe span[style]{min-width:280px;width: 100% !important;}
.-cx-PRIVATE-pluginBoxContainer__border{ border:none}

work for me

@BKPremier

This comment has been minimized.

Show comment Hide comment
@BKPremier

BKPremier Jun 11, 2013

I used {width: 100% !important;overflow: hidden;} to make the iframe render to the parent size. However, when I decrease the viewport size on my laptop browser, the content/feed does a text-wrap with the width and drops to the next line. However, when viewing on my iphone, the text is cut off. Any idea on what could be an issue? Also, this has been working fine for me for the past month, and just yesterday I started getting an overflow error with the Like Box. Did Facebook change something within their plugins?

I used {width: 100% !important;overflow: hidden;} to make the iframe render to the parent size. However, when I decrease the viewport size on my laptop browser, the content/feed does a text-wrap with the width and drops to the next line. However, when viewing on my iphone, the text is cut off. Any idea on what could be an issue? Also, this has been working fine for me for the past month, and just yesterday I started getting an overflow error with the Like Box. Did Facebook change something within their plugins?

@ITPrism

This comment has been minimized.

Show comment Hide comment
@ITPrism

ITPrism Jun 29, 2013

I think, you should replace ".fb_iframe_widget" with ".fb-like-box" because there is a conflict with Facebook Like button. The button disappears! ;)

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

ITPrism commented Jun 29, 2013

I think, you should replace ".fb_iframe_widget" with ".fb-like-box" because there is a conflict with Facebook Like button. The button disappears! ;)

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

@timrobinson81

This comment has been minimized.

Show comment Hide comment
@timrobinson81

timrobinson81 Sep 2, 2013

That worked PERFECTLY!

That worked PERFECTLY!

@grizzlylab

This comment has been minimized.

Show comment Hide comment
@grizzlylab

grizzlylab Sep 4, 2013

Thank you. It is working fine in my Twitter Boostrap project.

Thank you. It is working fine in my Twitter Boostrap project.

@netromnessumsar

This comment has been minimized.

Show comment Hide comment
@netromnessumsar

netromnessumsar Sep 5, 2013

It works great in it self. I just seam to fight with the profile image inside the streams They really squeeze the text of the streams so the flexible width gets challenged in medium sized devices.

Do any one know if it would be possible to leave out the profile image in the stream?

It works great in it self. I just seam to fight with the profile image inside the streams They really squeeze the text of the streams so the flexible width gets challenged in medium sized devices.

Do any one know if it would be possible to leave out the profile image in the stream?

@jannejava

This comment has been minimized.

Show comment Hide comment
@jannejava

jannejava Sep 18, 2013

Did anyone find a solution that works for iPads (Safari / Chrome)?

Did anyone find a solution that works for iPads (Safari / Chrome)?

@dt10111

This comment has been minimized.

Show comment Hide comment
@dt10111

dt10111 Oct 8, 2013

Blerg, struggling with the same iPad issue. Fix is otherwise superb, would love to hear any recommendations for fixing iPad.

dt10111 commented Oct 8, 2013

Blerg, struggling with the same iPad issue. Fix is otherwise superb, would love to hear any recommendations for fixing iPad.

@relish27

This comment has been minimized.

Show comment Hide comment
@relish27

relish27 Dec 17, 2013

Also having the same iPad issue... same thing happens on my Samsung Galaxy (android).

Also having the same iPad issue... same thing happens on my Samsung Galaxy (android).

@jamesxv7

This comment has been minimized.

Show comment Hide comment
@jamesxv7

jamesxv7 Feb 18, 2014

For the iPad issue, since the properties you want to modify are inside the iframe, there is no way to achieve a fully reponsive fix because the CSS does not work cross domain.

For the iPad issue, since the properties you want to modify are inside the iframe, there is no way to achieve a fully reponsive fix because the CSS does not work cross domain.

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Feb 18, 2014

Many thanks!

ghost commented Feb 18, 2014

Many thanks!

@afroewis

This comment has been minimized.

Show comment Hide comment
@afroewis

afroewis Feb 20, 2014

Thank you, works perfectly

Thank you, works perfectly

@Tezting

This comment has been minimized.

Show comment Hide comment
@Tezting

Tezting Mar 5, 2014

They have now added:

id="feedback_xxxxxx" style="width: 470px;"

In the iFrame, so this solution is not enough anymore...

Tezting commented Mar 5, 2014

They have now added:

id="feedback_xxxxxx" style="width: 470px;"

In the iFrame, so this solution is not enough anymore...

@Morpho

This comment has been minimized.

Show comment Hide comment
@Morpho

Morpho Mar 5, 2014

Does not work anymore, just noticed the same :/
Should we open a new bug report on Facebook?

Morpho commented Mar 5, 2014

Does not work anymore, just noticed the same :/
Should we open a new bug report on Facebook?

@Morpho

This comment has been minimized.

Show comment Hide comment
@Morpho

Morpho Mar 5, 2014

Please subscribe here everybody who is affected: https://developers.facebook.com/x/bugs/256568534516879/

Morpho commented Mar 5, 2014

Please subscribe here everybody who is affected: https://developers.facebook.com/x/bugs/256568534516879/

@mahdavi1456

This comment has been minimized.

Show comment Hide comment
@mahdavi1456

mahdavi1456 Mar 26, 2014

Hi,
tnx , its very useful and easy to use.

Hi,
tnx , its very useful and easy to use.

@jesseshowalter

This comment has been minimized.

Show comment Hide comment
@jesseshowalter

jesseshowalter Apr 15, 2014

Thanks so much, this did the trick

Thanks so much, this did the trick

@emblisha

This comment has been minimized.

Show comment Hide comment
@emblisha

emblisha Sep 2, 2014

thanks soo much it works great

emblisha commented Sep 2, 2014

thanks soo much it works great

@urmilshah13

This comment has been minimized.

Show comment Hide comment
@urmilshah13

urmilshah13 Sep 3, 2014

perfect

perfect

@thethao

This comment has been minimized.

Show comment Hide comment
@thethao

thethao Sep 20, 2014

thank!

thethao commented Sep 20, 2014

thank!

@gordonbanderson

This comment has been minimized.

Show comment Hide comment
@gordonbanderson

gordonbanderson Oct 10, 2014

I've just resolved a similar issue using the CSS from http://stackoverflow.com/questions/24712583/make-a-facebook-like-box-responsive - however full width page responsive still leaves half the page blank on a 1600px wide monitor :(

I've just resolved a similar issue using the CSS from http://stackoverflow.com/questions/24712583/make-a-facebook-like-box-responsive - however full width page responsive still leaves half the page blank on a 1600px wide monitor :(

@kennyjamell

This comment has been minimized.

Show comment Hide comment
@kennyjamell

kennyjamell Oct 25, 2014

Thanks a lot!! it works perfectly for me!

Thanks a lot!! it works perfectly for me!

@hoangthien0291

This comment has been minimized.

Show comment Hide comment
@hoangthien0291

hoangthien0291 Nov 7, 2014

Thanks, copy -> paste in css file and done...

Thanks, copy -> paste in css file and done...

@Nashu99

This comment has been minimized.

Show comment Hide comment
@Nashu99

Nashu99 Dec 13, 2014

Thank you, works perfectly

Happy New Year 2015 Wallpapers

http://happynewyear2015wallpapersimages.blogspot.in

Nashu99 commented Dec 13, 2014

Thank you, works perfectly

Happy New Year 2015 Wallpapers

http://happynewyear2015wallpapersimages.blogspot.in

@ypawany

This comment has been minimized.

Show comment Hide comment
@ypawany

ypawany Jan 17, 2015

Thank you so much, it's working perfectly.

ypawany commented Jan 17, 2015

Thank you so much, it's working perfectly.

@saosangmo

This comment has been minimized.

Show comment Hide comment
@saosangmo

saosangmo Sep 9, 2015

Do not work for me. Could you reiview it?
http://huongnghiepnhatban.com
many thanks

Do not work for me. Could you reiview it?
http://huongnghiepnhatban.com
many thanks

@JillianKay

This comment has been minimized.

Show comment Hide comment
@JillianKay

JillianKay Dec 20, 2015

Thanks smeranda:

I've seen this one on http://www.urgentfiles.com/ but didn't find coding, Now you really help me with finding this code.

Thanks smeranda:

I've seen this one on http://www.urgentfiles.com/ but didn't find coding, Now you really help me with finding this code.

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