Setting percent % width of FB comments via CSS or JS: not working

StackOverflow https://stackoverflow.com/questions/8363721

Question

I'm trying to set the width in percent (80%) of the Facebook code.This doesn't work! First I tried via css but nothing has changed. It's always of default Facebook width (500px about).

<div id="fb-root" style="width: 80%"></div>
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<fb:comments href="http://stackoverflow.com" num_posts="5" width="auto"></fb:comments>

So, I decided to use javascript and change it width when the user resizes the browser's window. So, if my width screen is 1000px, it has to be 1000px. But when I resize the browser's window to 756px, it has to change to 756px via Javascript on the width="..." of fb:comments. The error is from Firebug (Firefox 8): box[0] is undefined -> var boxwidth = box[0].getAttribute("width");.

<script type="text/javascript">
    var box = document.getElementsByTagName("fb:comments");
    var boxwidth = box[0].getAttribute("width");

    alert("start...");
    alert("width of element 'box': "+boxwidth);
    alert("...end");

    /*resolution = screen.width;
    alert("Screen width: "+resolution);*/
</script>

Is there a way to set dynamically the width of fb:comments? Thanks in advance. See you, Davide.

PS. Sorry for my English mistakes, if i did some so....

Was it helpful?

Solution

the fb:comments css attribute apparently is no longer supported!

The width of the fb:comments always has to be in pixels. I'm not really sure what you are looking for, but I hope this might help to get you on your way.

in your html, create a div:

<div id="fbcomment">
</div>

between your script tags, use this piece of jquery code and replace the body selector with the element you want to calculate the 80% off.

$(document).ready(function(){

    width_percent = $('body').width() * 0.8;
    fbxml = '<fb:comments href="http://stackoverflow.com" num_posts="5" width="' + width_percent  + 'px"></fb:comments>';

    $('#fbcomment').append(fbxml);
});

Here is a working example: http://jsfiddle.net/CZpx2/3

It's a nasty workaround and it has it's limitations, but it does the trick in some situations. Hope it does for you!

OTHER TIPS

How about this (if you're using the latest Facebook comments code):

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

in css you can try adding an !important:

fb:comments {
  width:80% !important;
}

and with jQuery:

jQuery(document).ready( function () {
  $('fb:comments').css('width', '100%');
})

Easy, i think this Question has been asked for old fb comments plugins, now u can just add data-width attribute with a value of 100%, to give it the parent width.

Step 1

After the body tag put js code as discribed in fb docs

<div id="fb-root"></div>
<script>
  (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_US/sdk.js#xfbml=1&version=v2.8appId=**YOUR_APP_ID**";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Remplace YOUR_APP_ID by appID generated by facebook

Step 2 Inside a block tag probably a div tag give it a width, and put inside it:

<div class="fb-comments" data-href="YOUR_URL" data-numposts="10" data-width="100%"></div>

Replace YOUR_URL by the your website page url, you may also change the number of post showing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top