I was using:
.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}
To make Facebook Comments responsive on my website. This was working fine and dandy just the other day. Today I look and they have changed their code. Is it possible to get this working again?
Here's a new CSS-only solution. Did this for a project I'm working on today (July 16, 2014) and it works beautifully.
HTML
<div class="fb-comments"
data-href="http://example.com/comments"
data-numposts="10"
data-width="100%"
data-colorscheme="light"></div>
CSS
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}
The trick are data-width: 100% and min-width: 100% !important; width: 100% !important;
I got bit by this too. I put in a JS hack. Basically bind to the resize event of the window and redraw the comments widget when it fires (uses jquery if you want I can post without):
$(window).resize(function(){
$(".fb-comments").attr("data-width", $(".comments").width());
FB.XFBML.parse($(".comments")[0]);
});
In the example above .comments is the container that you want the width of the fb-comments to expand to. The downside of this is that when the window is resized the comments widget is reinitialized.
If you use underscore wrap the resize handler using debounce to keep it from firing to often.
This issue is now fixed by Facebook (Comments Plugin Is Now Forcing Fixed Width)
You should use data-width="100%"
See the documentation: https://developers.facebook.com/docs/plugins/comments
Below is my solution. This script is just a workaround for this bug
Solution inspired by:
- above answers
- this link
Code below (just replace .comments-area with your own container class name)
<script>
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
$(document).ready(function(){
if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
$(".fb-comments").attr("data-width", $(".comments-area").width());
}
$(window).smartresize(function(){
if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
$(".fb-comments").attr("data-width", $(".comments-area").width());
FB.XFBML.parse($(".comments-area")[0]);
}
});
});
</script>
Add data-width="100%" attribute to your fb-comments element. It will set the container to a fluid width.
Ex:
<div
class="fb-comments"
data-href="http://www.someurl.com/somepage/"
data-num-posts="10"
data-width="100%"
></div>
This seems like a recent update from Facebook on their Facebook Comments Plugin
An adaptive pure CSS approach can be found here:
http://jsfiddle.net/bennyaarup/5gyp6/
HTML
I add FB comment code blocks in duplicate - amounting to the number of adaptive stages (data-width) I need. I add the extra class = .fb-1, .fb-2, .fb-3 etc... which I need in the CSS.
<div class="fb-comments fb-1" data-href="http://yourdomain.com" data-width="900" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-2" data-href="http://yourdomain.com" data-width="800" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-3" data-href="http://yourdomain.com" data-width="700" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-4" data-href="http://yourdomain.com" data-width="600" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-5" data-href="http://yourdomain.com" data-width="500" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-6" data-href="http://yourdomain.com" data-width="400" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-7" data-href="http://yourdomain.com" data-width="300" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-8" data-href="http://yourdomain.com" data-width="200" data-numposts="5" data-colorscheme="light"></div>
CSS
I style the adaptive stages using media queries and display:none to show the respective comment field
@media all and (min-width: 400px), (max-width: 300px) {
.fb-8{
display: none !important;
}
}
@media all and (min-width: 500px), (max-width: 400px) {
.fb-7{
display: none !important;
}
}
@media all and (min-width: 600px), (max-width: 500px) {
.fb-6 {
display: none !important;
}
}
@media all and (min-width: 700px), (max-width: 600px) {
.fb-5 {
display: none !important;
}
}
@media all and (min-width: 800px), (max-width: 700px) {
.fb-4 {
display: none !important;
}
}
@media all and (min-width: 900px), (max-width: 800px){
.fb-3 {
display: none !important;
}
}
@media all and (min-width: 1000px), (max-width: 900px){
.fb-2 {
display: none !important;
}
}
@media all and (max-width: 1000px) {
.fb-1 {
display: none !important;
}
}
It's a bit of a hack, but it works beautifully
try using this code This might be a little different
#fbcomments, .fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span,
#fbcomments iframe [style]
{
width: 100% !important;
}
I had the same issue (implemented the responsive comments yesterday, today it didn't work anymore ).
I don't have enough points to vote but the above answer works. I am using the facebook plugin for wordpress. I also set a timeout when the page loads to get the right width immediately.
setTimeout(function(){
$(".fb-comments").attr("data-width", $(".comments-area").width());
FB.XFBML.parse($(".comments-area")[0]);
}, 1000)
The debounce solution from Ka. is good but this could be more straightforward and should memoize the nodes. Make sure you wrap your fb-comments in some container:
<div class="comments">
<div class="fb-comments" data-href="..." data-numposts="5" data-colorscheme="light"></div>
</div>
Then (if using jQuery) setup a resize that debounces the number of requests. Also, make sure you cache the nodes you are checking to speed things up:
var $comments = null;
var $fbComments = null;
var resizeTimeout = null;
function resizeComments() {
if (resizeTimeout) clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
if (typeof FB === 'undefined') return;
// The class of the wrapper element above is 'comments'
$comments = $comments || $('.comments');
$fbComments = $fbComments || $(".fb-comments");
if ($comments.width() !== parseInt($fbComments.attr("data-width"), 10)) {
$fbComments.attr("data-width", $comments.width());
FB.XFBML.parse($comments[0]);
}
}, 100);
}
Then call this function on document ready and when the window resizes:
$(document).ready(function() {
resizeComments();
$(window).resize(function() {
resizeComments();
});
});
Hope this helps:
/* resize facebook comments */
(function(window){
var dh = null;
$(window).on("resize",function(){
if ( dh ) {
clearTimeout(dh);
}
dh = setTimeout(function(){
var $fbc = $(".fb-comments");
var $stc = $(".comments-container");
dh = null;
if ( $fbc.attr("data-width") != $stc.width() ) {
$stc.css({height:$stc.height()});
$fbc.attr("data-width", $stc.width());
FB.XFBML.parse($stc[0],function(){
$stc.css({height:'auto'});
});
}
},300);
}).trigger("resize");
})(this);
Cheers!
Here is a small solution.. try it...
Add this jQuery:
$(document).ready(function(){
$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
});
Ok this is what I have so far based one Timothy's comment.
function resizeFbComment(){
if (typeof FB === 'undefined')
return;
$(".fb-comments").attr("data-width", $(".fb-comments").width());
FB.XFBML.parse($(".comments")[0]);
}
$(window)
.load(resizeFbComment)
.resize(resizeFbComment);
Obviously, this is a temporary hack. The windows resize should have a timeout.
Adding to the answers here. You really should have a timeout so you're not refreshing the comments dozens of times per second. Also, it's really not great practice to continue crawling the DOM for the elements every time the function is fired, this should be a bit more efficient:
$(function() {
// cache some selectors so we're not looking up divs over and
// over and over on resize
var facebook_comment_resize,
comment_resize_timeout,
$window = $(window),
$comments_container = $('#comments'),
$comments = $('.fb-comments');
var facebook_comment_resize = function() {
// define a function to get the width of the comment container
// then set the data-width attribute on the facebook comment div
$comments.attr("data-width", $comments_container.width());
// Reinitialize the comments so it can grab the new width from
// the data element on the comment div
FB.XFBML.parse($comments_container.get(0));
}
// Set a timeout that can clear itself, keeps the comments
// from refreshing themselves dozens of times during resize
$window.on('resize', function() {
clearTimeout( comment_resize_timeout );
comment_resize_timeout = setTimeout(facebook_comment_resize, 200);
});
// Set the initial width on load
facebook_comment_resize();
});
This is the only solution that has worked for me. (You need the FB root bit too) Original found here: http://jsfiddle.net/PZD54/4/
<script>
setTimeout(function(){
resizeFacebookComments();
}, 1000);
$(window).on('resize', function(){
resizeFacebookComments();
});
function resizeFacebookComments(){
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $('#comments').width();
$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
</script>
<div id="comments">
<div class="fb-comments" data-href="http://www.url-here.com"></div>
</div>
I Think css hack can't solve our problem now, this javascript solution solved my problem:
<div id="commentbox"></div>
<script type="text/javascript">
$(function () {
$(window).bind("load", function () {
var containerwidth = $('#commentbox').width();
$('#picture_comment').html('<fb:comments ' +
'href="http://yourlink"' +
' width="' + containerwidth + '" numposts="5" ' +
'colorscheme="light"></fb:comments>');
FB.XFBML.parse(document.getElementById('commentbox'));
});
});
</script>
I tried data-width="100%" and worked for me, but when I resize the screen the container remains the same size, it doesn't change, I tried with Ripple plugin for chrome and it looks good but I have to tap or click twice to comment.
.fb-comments, .fb-comments span, .fb-comments iframe {
min-width: 100% !important;
max-width: 100% !important;
}
works with the new 100% data-width.
来源：https://stackoverflow.com/questions/22187961/responsive-facebook-comments-css-hack-broken