CODEWITHSUNDEEP
javascriptcsswidthfacebook-comments
Daddie
Daddie

Reputation: 13

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

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....

Upvotes: 1

Views: 4248

Answers (4)

Yassine Sedrani
Yassine Sedrani

Reputation: 774

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.

Upvotes: 0

Jorre
Jorre

Reputation: 17581

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

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

Upvotes: 4

Pascalculator
Pascalculator

Reputation: 940

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!

Upvotes: 5

MCSI
MCSI

Reputation: 2894

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%');
})

Upvotes: 1

Related Questions