Facebook, как виджет, не признающий атрибут ширины данных?

Я заметил сегодня, что атрибут ширины данных для виджета Facebook Like Box не работает. Похоже, что он возвращается к ширине по умолчанию. Пример того, о чем я говорю, можно увидеть на http://blog.christopherjonesart.com.

Вот код, который я использую (это довольно стандартный):

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="#" onclick="location.href='http://www.facebook.com/christopherjonescomicart'; return false;"    data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

Я испытываю эту проблему на нескольких сайтах. Это делается в Chrome, Firefox, Safari и Internet Explorer. Я недавно не обновлял Wordpress или вносил какие-либо изменения в мой css.

Помощь? Это выглядит очень мутно.: - (

Ответ 1

Развернувшись на user2477225, ответьте, у него могут возникнуть проблемы с настраиваемым позиционированием, которое вы устанавливаете (относительным или абсолютным где-то на странице), поэтому я сделал это:

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Кажется, работает до сих пор.

Изменить. Для IE 8 (и ниже) используйте вместо этого:

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Мне нравится быть как можно более конкретным в моих селекторах, но после проверки этой проблемы я еще не вижу технических причин использовать селектор > здесь.

Ответ 2

Я думаю, мы должны сказать fb, чтобы исправить их немой script, теперь fb как box должен быть не менее 292 px в ширину.

Они четко обозначают https://developers.facebook.com/docs/reference/plugins/like-box/

Минимальная поддерживаемая ширина плагина составляет 292 пикселя.

Ответ 3

Я установил ширину с небольшим взломом CSS, но это временно. Мой взлом - это:

.fb-like-box iframe {
     width: your_width_in_px !important;
}

Ответ 4

Просто используйте iFrame вместо fbml и измените ширину на все, что требуется.

i.e.:( ширина: 194px ниже)

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe>

Спасибо!

Ответ 5

У меня перед вами такая же проблема. моим решением является использование jquery script для изменения ширины поля как в готовом к нему времени.

в разделе головы

<script type="text/javascript">
function JS_wait(){
            // wait until like box script load
    if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){

        window.setTimeout(JS_wait, 100); 
    }else{
                    // wait 5 seconds to like box rendered.
        window.setTimeout(JS_ready, 5000); 
    }
}

function JS_ready() {

    // resize facebook like box to 200 px
    //alert("JS_ready");
    $("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px');
    $("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200');
    $("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px');
};
</script>

и в готовом документе добавить

<script type="text/javascript">
$(document).ready(function() {
      JS_wait();
    });
</script>

Приветствия это должно помочь вам.

Ответ 6

Используйте настройки iframe на моем сайте, используя настройки iframe с одинаковой шириной 236px и перекрывает ширину 292px. Безразличное мышление FB, каждый сайт нуждается в боковой панели шириной 292 пикселя???? Yeye

Ответ 7

После fb: like-box добавьте этот script измените 244px на ширину

FB.Event.subscribe('xfbml.render', function(response) {

 var el = document.querySelector(".fb_iframe_widget span");
 el.style.width='244px';
 el = document.querySelector(".fb_iframe_widget iframe");
 el.style.width='244px';
});

Ответ 8

В соответствии с официальная публикация Facebook, например, поле box, минимальная ширина 292px.

Тем не менее, есть небольшой проект на github, чтобы сделать facebook как box отзывчивым и адаптироваться к вашему макету веб-сайта.

Применяя этот вместе с настройкой ширины контейнера любой ширины, вы предпочитаете, чтобы поле, подобное facebook, заполнило этот контейнер и адаптировалось к его ширине, не более, не менее:

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}

/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

Ответ 9

Вот что я использовал, чтобы исправить это, это не то же самое, поскольку я не показываю лица, а просто адаптирую его к вашему коду, важной частью является div # fb-like-container, который я добавил, он позволяет мне использовать селектор css для изменения требуемого кода.

CSS

<script>
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{
    width: 173px!important; 
}
</script>

HTML (ширина данных не учитывается):

<div id="fb-like-container">
    <div class="fb-like-box" 
    data-href="#" onclick="location.href='http://www.facebook.com/christopherjonescomicart'; return false;" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false">
     </div>
</div>