I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized.
Using media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.
Any way to set a fluid width for the Facebook social plugins?
none of these methods worked but using this idea, the following worked for me:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
I found a solution using css. Inspiration came from this article http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
The correct working answer is a combination of things I found here. Mikel's answer is a good start:
Facebook Developers Platform link
This says:
We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.
But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
This will cause the plugin to resize to the available space as you resize the window.
If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
(thanks for the addition Black_Stormy!)
I managed to make it work by using this code:
.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
because in my html file I have this:
<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true" data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
Tip: You should change your css depending of the div class.
Although it's an old question, this is now the top Google result for "facebook comment plugin responsive" so it's still relevant.
The workarounds in the other answers aren't needed anymore, as FB have recently (May 2014) fixed this at their end.
From https://developers.facebook.com/x/bugs/256568534516879/:
We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.
So now you can just update your HTML to e.g.
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
And don't need any extra CSS workarounds.
Edit: this will create the plugin to adapt it's width to the available space at load time. When you resize the browser window the plugin will remain at that initial width. To make it true responsive add this to your CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
This will cause the plugin to adapt to the currently availably space when you resize the browser
If you are using the official wordpress facebook plugin due to the mobile sniffing facebook do.
The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false. Please note: the mobile version ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If preferred, you can still control the width via a container element. http://developers.facebook.com/docs/reference/plugins/comments/
You will need to change the facebook/social-plugins/fb-comments.php on line 35.
<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>
This will allow you to style with the below.
.fb-social-plugin {
width:98%!important;
}
.fb_iframe_widget span {
width:100%!important;
}
.fb-comments iframe[style] {width: 100% !important;}
It would be nice if they could either fix their mobile version or put a setting on their plugins GUI.
It will definitely work just for adding .fb-comments span in style.
.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
Accepted answer did not work for me.
I found this by Craig Bailey in the comments here:
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
which is perfectly fluid (tested in osx ff & safari, ios6).
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Looks like this post is not very old but the answer wasn't working for me. I had to add this to my stylesheet...
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
The .fb_iframe_widget and .fb_iframe_widget[style] both seemed to be important.
An important note about this resize stuff: If the Facebook comment script detects that you're on a mobile device it breaks this. But, if you make the <fb:comments> tag contain the attribute value mobile="false" then (for now) Facebook's scripts will respect your CSS.
For those who prefer using the HTML5 code for Facebook plugins like the Activity Feed or Like Box:
/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fb_iframe_widget span[style], .fb_ltr[style] {
width:420px !important;
}
}
Just put this either in your CSS file or in your html code with style tags !!!
<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]{width: 100% !important;}
</style>
Joining the uninformed masses with my own solution to this problem, as of September, 2015:
Facebook provides an option to the fb-page widget called adapt-container-width, which (according to the docs,) should track the parent's width (up to a maximum width of 500px). When rerendering with FB.XFBML.parse(), the widget seems to get stuck on a strange value for the parent's container width, despite what you set on the actual widget itself. For now, this works well enough:
window's resize method, (optionally using _.debounce with a sensible limit to prevent overloading the browser with the intermediate requestsWait for Facebook to expose more of the widget API so we can see what the hell is going on
<div class="fb-page"
data-adapt-container-width="false" <!-- This bit's the important part -->
data-href="https://www.facebook.com/yourpage"
data-show-posts="true"
data-small-header="true"
data-width="100%"
>
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote>
</div>
</div>
combined with the following javascript:
// FB Resize
$(window).bind('resize', _.debounce(function() {
if (window.FB && FB.XFBML && FB.XFBML.parse) {
var el = $('.fb-page');
var width = el.parent().width();
el.attr('data-width', width);
FB.XFBML.parse();
}
}, 1000)); // Debounce until 1000ms have passed
I've got this working using this simple script (see code in link).
https://gist.github.com/2111366
You have to make a few changes to the information so that you are using your Facebook App ID and your page URL.
This solution is using jQuery so you'll have to understand how that work but once you get the script to execute your responsive design will work on page load or when resizing the page.
Facebook made some changes to the outputted markup from the comments plugin. I am using the HTML5 version. This amended CSS from what was shared above did the trick.
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
Here is some jquery that should persist across changes to the output markup as it uses a regex expression to rewrite the width only, leaving the rest of the style tag alone.
You need to specify the correct container id or selector, replacing my example of: #footer-last. The iframe is resized based on the changes in width to the container, which will need to be set up as responsive.
// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
I don't know about the comments, but with the link box, all you have to do is use the iframe option direct from Facebook and switch out the width in pixels with a percentage, and it'll change depending on the width of the column it's in.
Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
Here's a complete example, using jQuery, with a response width and a loading image. The CSS code of Alan and Jubair is commented in the code.
That's works fine in an Android webview
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100%;/* !important; To get the control with JQuery*/
}
</style>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
channelUrl : '//domain.com/channelUrl.php',
status : true,
cookie : true,
xfbml : true
});
//Event fired when the plugin has been completely loaded
FB.Event.subscribe('xfbml.render',
function(response) {
//alert('You liked the URL: ' + response);
var w = (typeof window.innerWidth != 'undefined')?
window.innerWidth
:(typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) ?
document.documentElement.clientWidth
: document.getElementsByTagName('body')[0].clientWidth;
w *= .950; //95% for best fit on mobile screens
//RESIZE
$(".fb-comments").css("width",w);
$(".fb-comments > span").css("width",w);
//Some days ago the next line would be sufficient
$(".fb_ltr").css("width",w);
//Now the modify of the span width is necessary to do the work
$("#div_loading_gif").remove();
}
);
};
//cargando SDK Asíncronamente
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="div_loading_gif" style="width:100%; height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >
</div>
<!--Usando jquery modificar el style de el div de clase fb_ltr
cambiar el ancho por el de la pantalla-->
<div class="fb-comments"
style="padding:0 auto;"
data-href="http://domain.com/comments.html"
data-width="100px"
data-num-posts="5"
data-mobile="false"
>
</div>
</body>
This is JQuery and might be part of the answer to your question. I am using the HTML5 version of the like button:
<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>
The "div.main-content" element is the element that the like button must fit into in my design. The resizing works until to the div gets so small that the data-layout attribute in the div.fb-like needs to be changed from "standard" to an alternative that takes up less horizontal space. I am new at this, so I am not sure if this is the most elegant solution to making the like button repsonsive. I would like to see an answer to this question from somebody that is more of an expert on this subject.
$(window).resize(function() {
var computed_width = $('div.main-content').width();
$('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height: 24px; width: ' + computed_width + 'px');
});
Use the inspect element to see what code is being generated. In some cases like Wordpress Facebook plugins they use different "ids" and once you find the id being used adding
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
This doesnt always do the trick im learning. While you can change colors and some sizing making it responsive is still very buggy. It doesnt seem to like percentages and doesnt see the size of the box it's in so this isnt working. im toying with doing @media queries to resize it depending on the size of browser window.
It would be nice if it recognized the width but the @media seems to be the only way.
I think max-width is better than width in this case, and it works for me:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
This works for me
/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
display: inline !important;
}
.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
width: 100% !important;
}
I've just tried this and it appears there is now a <div> within the iframe that has a fixed width, meaning you now actually need to remove the style tag with javascript to make it fluid.
EDIT: You can't access the iframe content with JS because it's coming from another domain
Create an empty div where you want the facebook like box to be (or other social plug-in, works universally) with a class 'fb-container', then add the following jQuery:
$(document).ready(function(){
$('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});
p.s. you can replace PARENT DIV with any other element you want the comment box to match and WWW.YOURSITEHERE.COM with your site
I got it working using a little jQuery and setting the "data-width" attribute when the page loads and on window resizing. Problem I ran into with all the CSS approaches is that some of the comments and buttons were hidden outside the container's margins or overflowing.
Here's my $0.02, hope it helps. Also, just set the #content selector to whatever you want the comment box to match such as a container div...
jQuery(document).ready(function() {
//check for device width and reformat facebook comments
function fbCommentWidth() {
jQuery('.fb-comments').attr('data-width',jQuery('#content').width());
}
//run on resize, and reparse FB comments box
jQuery(window).on('resize',function() {
fbCommentWidth();
FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();
});
That's how it works: just add this data-width="100%" Here is an example:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
Here is what I ended up with:
(function() {
window.addEventListener('load', updateWidth);
window.addEventListener('resize', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$('.fb-like, .fb-comments').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr('data-width', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();
