Установка процента% ширины комментариев FB через CSS или JS: не работает - PullRequest
Новая
       6

Установка процента% ширины комментариев FB через CSS или JS: не работает

1 голос
/ 03 декабря 2011

Я пытаюсь установить ширину в процентах (80%) кода Facebook. Это не работает! Сначала я попробовал через css, но ничего не изменилось. Он всегда имеет ширину Facebook по умолчанию (около 500 пикселей). 

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

Итак, я решил использовать javascript и изменить его ширину, когда пользователь изменяет размер окна браузера. Итак, если у меня ширина экрана 1000px, то она должна быть 1000px. Но когда я изменяю размер окна браузера до 756px, он должен измениться до 756px через Javascript для width = "..." fb: comments. Ошибка из Firebug (Firefox 8): box [0] не определен -> 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>

Есть ли способ динамически установить ширину комментариев fb:? Заранее спасибо. Увидимся, Давиде.

PS. Извините за мои ошибки в английском, если я сделал что-то подобное ...

Ответы [ 4 ]

5 голосов
/ 05 декабря 2011

атрибут cb fb: comments, по-видимому, больше не поддерживается !

Ширина комментариев fb: всегда должна быть в пикселях. Я не совсем уверен, что вы ищете, но я надеюсь, что это может помочь вам в вашем пути.

в вашем html, создайте div: 

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

между вашими тегами сценария, используйте этот фрагмент кода jquery и замените селектор body элементом, который вы хотите рассчитать на 80%. 

$(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);
});

Вот рабочий пример: http://jsfiddle.net/CZpx2/3

Это неприятный обходной путь, и у него есть свои ограничения, но в некоторых ситуациях он помогает. Надеюсь, что это для вас!

4 голосов
/ 08 июня 2012

Как насчет этого (если вы используете последний код комментариев Facebook): 

.fb-comments iframe, .fb-comments, .fb-comments span { width:100% !important; }
1 голос
/ 03 декабря 2011

в CSS Вы можете попробовать добавить! важное: 

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

и с jQuery: 

jQuery(document).ready( function () {
  $('fb:comments').css('width', '100%');
})
0 голосов
/ 21 октября 2016

Легко, я думаю, что этот вопрос был задан для старых плагинов комментариев fb, теперь вы можете просто добавить атрибут data-width со значением 100%, чтобы присвоить ему родительскую ширину.

Шаг 1

После тега body введите код js, описанный в 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>

Заменить YOUR_APP_ID на appID, сгенерированный Facebook

Шаг 2 Внутри тега блока, вероятно, тег div задает его ширину и помещает в него: 

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

Замените YOUR_URL URL-адресом страницы своего веб-сайта, вы также можете изменить количество отображаемых сообщений.

...