CODEWITHSUNDEEP
cssfacebook
Chris Scott
Chris Scott

Reputation: 643

How to change width on facebook comment widget?

Looks like facebook has once again changed the code for their comment widget. The old hoops we used to jump through of changing the width no longer work.

Examples that no longer work:

.fb-comments * {
width: 100% !important;
}

.fb-comments, .fb-comments span, .fb-comments iframe {
    width: 100% !important;
}

The div which has the width set with inline CSS has an random-generated ID, like feedback_0GsySnrdOA4KOODKY, so you can't override it with CSS. The bastards.

Anyone have a solution which doesn't require javascript?

I don't understand why there isn't an option to create the widget with a percentage rather than a pixel. I mean ... is a responsive widget too much to ask for?

Upvotes: 1

Views: 3053

Answers (3)

gegham
gegham

Reputation: 471

this worked for me: Add to the fb-comments div data-width="100%"

<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

and it will be responsive when you resize the browser.

you can put the fb-comments div inside another div and give that div the width you want.

Upvotes: 2

Debajyoti Das
Debajyoti Das

Reputation: 2148

Follow this bug https://developers.facebook.com/x/bugs/256568534516879/

Some solution you can use...I found in the thread.

DEMO : http://jsfiddle.net/PZD54/1/

function fbCommentsWorkaround() {      
        function resizeFacebookComments(){
            var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $('.fb-comments').parent().parent().width();
            $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
            $('.fb-comments iframe').css({width: width});
            $('.fb-comments span').css({width: width});
        }

        FB.Event.subscribe('xfbml.render', resizeFacebookComments);

        $(window).on('resize', function(){
            resizeFacebookComments();
        });

        $('.fb-comments iframe').on('load', function() {
            resizeFacebookComments();
            $('.fb-comments iframe').unbind('load');
        });
    }

window.fbAsyncInit = function() {
            FB.init({
                appId   : "596895303735715",
                status  : true,
                cookie  : true,
                oauth   : true,
                xfbml   : true,
                logging : false
            });
            fbCommentsWorkaround();
        };

        (function(d){
            var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            d.getElementsByTagName('head')[0].appendChild(js);
        }(document));

Upvotes: 2

gen035
gen035

Reputation: 1

You can use the "data-mobile" attribute. (https://developers.facebook.com/docs/plugins/comments/)

But this will only work on a mobile device, if you want it to resize when resizing the width of your browser, you will need Javascript, I would use $("#element").attr("data-width","size you want"); and call it on load and on resize.

Upvotes: 0

Related Questions