Facebook как поле виджета не распознает атрибут ширины данных?

Question

Я только сегодня заметил, что атрибут data-width для виджета 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="http://www.facebook.com/christopherjonescomicart"    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.

Помогите? Это выглядит действительно вялым, как это.:-(

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

Я установил ширину немного CSS взломать но это только временно. Мой хак это:

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

Answer 4

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

Answer 5

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

то есть:(ширина: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> 

Спасибо!

Answer 6

У меня с вами такая же проблема. Мое решение - использовать скрипт jquery, чтобы изменить ширину поля "лайк" во время готовности блока "лайк".

в головной части

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

Ура, это должно помочь вам.

Answer 7

После того, как fb:like-box добавит этот скрипт, измените 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';
});

Answer 8

Согласно официальной странице в Facebook, минимальная ширина составляет 292 пикселя.

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

Применение этого вместе с установкой ширины контейнера на любую ширину, которую вы предпочитаете, заставит 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;
}

Answer 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="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false">
     </div>
</div>