Можно ли установить ширину жидкости для социальных плагинов Facebook?

ни один из этих методов не работал, но, используя эту идею, для меня сработало следующее:

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

Я нашел решение с помощью CSS. Вдохновение пришло из этой статьи http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

мне удалось заставить его работать с помощью этого кода:

.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}

потому что в моем html-файле у меня есть это:

<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>

совет: вы должны изменить свой css в зависимости от класса div.

хотя это старый вопрос, теперь это лучший результат Google для "facebook comment plugin responsive", поэтому он по-прежнему актуален.

обходные пути в других ответах больше не нужны, так как FB недавно (май 2014 года) исправил это в конце.

от https://developers.facebook.com/x/bugs/256568534516879/:

мы выдвинули исправление для этого. Теперь вы можете указать ширину как 100% (напр. data-width= " 100%"), чтобы получить жидкий макет. Документы обновлено тоже:https://developers.facebook.com/docs/plugins/comments Спасибо за ваше терпение.

Так что теперь вы можете просто обновить HTML, например

<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>

и не нужно никаких дополнительных обходных путей CSS.

Edit: это создаст плагин, чтобы адаптировать его ширину к доступному пространству во время загрузки. При изменении размера окна браузера плагин останется на начальная ширина. Чтобы сделать его истинно отзывчивым, добавьте это в свой CSS:

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

это заставит плагин адаптироваться к текущему доступному пространству при изменении размера браузера

Если вы используете официальный плагин wordpress facebook из-за мобильного нюхания facebook do.

мобильная версия будет автоматически отображаться, когда мобильное устройство обнаружен агент пользователя. Это поведение можно отключить, установив мобильный параметр в false. Обратите внимание: мобильная версия игнорирует параметр ширины, и вместо имеет жидкую ширину 100% для того чтобы размер в портрет/пейзаж ситуациях переключения. Вам может понадобиться регулировать ваш CSS для вашего мобильного сайта, чтобы воспользоваться этим поведение. При желании вы все равно можете управлять шириной с помощью элемент контейнера. http://developers.facebook.com/docs/reference/plugins/comments/

вам нужно будет изменить facebook / social-plugins / FB-comments.php on line 35.

<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>

Это позволит вам стиль С ниже.

.fb-social-plugin {
    width:98%!important;

}

.fb_iframe_widget span {
    width:100%!important;
}

.fb-comments iframe[style] {width: 100% !important;}

было бы неплохо, если бы они могли либо исправить свою мобильную версию, либо поставить установка плагинов на их графический интерфейс.

это определенно будет работать только для добавления .fb-comments span в стиле.

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

принятый ответ не работа для меня.

Я нашел это Крейг Бейли в комментариях здесь:

http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress

который идеально жидкий (протестирован в osx ff & safari, ios6).

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

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

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}

The .fb_iframe_widget и .fb_iframe_widget[style] оба казались важными.

Я получил это работает с помощью этого простого скрипта (см. код в ссылке).

https://gist.github.com/2111366

вы должны внести несколько изменений в информацию, чтобы вы использовали свой идентификатор приложения Facebook и URL-адрес своей страницы.

Это решение использует jQuery, поэтому вам нужно будет понять, как это работает, но как только вы получите скрипт для выполнения вашего адаптивного дизайна, он будет работать при загрузке страницы или при изменении размера страницы.

важное замечание об этом изменении размера: если скрипт комментариев Facebook обнаруживает, что вы находитесь на мобильном устройстве, он нарушает это. Но, если вы сделаете <fb:comments> тег содержит значение атрибута mobile="false" тогда (на данный момент) скрипты Facebook будут уважать ваш CSS.

для тех, кто предпочитает использовать HTML5 код для плагинов Facebook как Лента или Как Поле:

/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .fb_iframe_widget span[style], .fb_ltr[style] {
    width:420px !important;
    }
}

• не работает с комментариями или процентной шириной; придерживайтесь кода iframe, если вам нужна чистая текучесть.
• H/T to Алан для ссылки css-tricks в верхней части этой страницы. (:

просто поместите это либо в свой CSS-файл, либо в свой html-код с тегами стиля !!!

<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe     span[style]{width: 100% !important;}
</style>

Ref:http://dwij.co.in/making-facebook-comments-responsive

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

Facebook предоставляет возможность fb-page виджет под названием adapt-container-width, который (согласно docs,) должен отслеживать ширину родителя (до максимальной ширины 500px). При переориентации с FB.XFBML.parse(), виджет, похоже, застрял на странном значении ширины контейнера родителя, несмотря на то, что вы установили на самом виджете. Сейчас это хорошо работает хватит:

1. создать элемент с помощью генератора кода FB (в верхней части на этой странице)
2. привязать событие к window ' s resize метод (при использовании _.debounce С разумным ограничением, чтобы предотвратить перегрузку браузера с промежуточными запросами

3. подождите, пока Facebook выставит больше API виджетов, чтобы мы могли видеть, что, черт возьми, происходит

   <div class="fb-page"
       data-adapt-container-width="false" <!-- This bit's the important part -->
       data-href="https://www.facebook.com/yourpage"
       data-show-posts="true"
       data-small-header="true"
       data-width="100%"
   >
       <div class="fb-xfbml-parse-ignore">
           <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote>
       </div>
   </div>
   

в сочетании со следующими javascript:

    // FB Resize
    $(window).bind('resize', _.debounce(function() {

        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            var el = $('.fb-page');
            var width = el.parent().width();
            el.attr('data-width', width);

            FB.XFBML.parse();
        }
    }, 1000)); // Debounce until 1000ms have passed

это jQuery и может быть частью ответа на ваш вопрос. Я использую HTML5 версию кнопки like:

<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>

" div.элемент "main-content" - это элемент, который кнопка like должна вписываться в мой дизайн. Изменение размера работает до тех пор, пока div не станет настолько маленьким, что атрибут data-layout в div.fb-like должен быть изменен с "стандартного" на альтернативу, которая занимает меньше горизонтального пространства. Я новичок в этом, поэтому я не уверен, что это самое шикарное разрешение К делать подобную кнопку repsonsive. Я хотел бы увидеть ответ на этот вопрос от кого-то, кто больше является экспертом по этому вопросу.

$(window).resize(function() {
  var computed_width = $('div.main-content').width();    
  $('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height:  24px; width: ' + computed_width + 'px');
});

используйте элемент inspect, чтобы увидеть, какой код создается. В некоторых случаях, как WordPress Facebook Плагины они используют различные "идентификаторы" и как только вы найдете идентификатор используется добавление

 #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}

Это не всегда делает трюк im обучения. Хотя вы можете менять цвета и некоторые размеры, делая его отзывчивым, все еще очень глючит. Кажется, что он не любит проценты и не видит размер коробки, в которой он находится, поэтому это не работает. я играю с выполнением запросов @media, чтобы изменить его размер в зависимости от размера окна браузера.

было бы неплохо, если бы он распознал ширину, но @media, кажется, единственный способ.

Facebook внес некоторые изменения в выводимую разметку из плагина комментариев. Я использую версию HTML5. Этот измененный CSS из того, что было выше, сделали свое дело.

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

вот некоторые jquery, которые должны сохраняться в изменениях выходной разметки, поскольку он использует выражение regex для перезаписи только ширины, оставляя остальную часть тега стиля в покое.

вам нужно указать правильный идентификатор контейнера или селектор, заменив мой пример: #footer-last. Размер iframe изменяется в зависимости от изменения ширины контейнера, который необходимо настроить как отзывчивый.

// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);

Я не знаю о комментариях, но с полем ссылки все, что вам нужно сделать, это использовать опцию iframe прямо из Facebook и переключать ширину в пикселях с процентом, и она будет меняться в зависимости от ширины столбца, в котором он находится.

вот небольшая работа, которая добавляет плагин HTML5 Facebook LikeBox в DOM с высотой или шириной ответа.

        $(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'>
            </div></div>");
        });

вот полный пример, используя jQuery, с шириной ответа и загрузкой изображения. Код CSS Алана и Джубаира прокомментирован в коде.

Это прекрасно работает в Android webview

<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
    .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
        width: 100%;/* !important; To get the control with JQuery*/
    }
</style>

<body>
    <div id="fb-root"></div>
    <script>
       window.fbAsyncInit = function() {
        FB.init({
                appId   : 'APP_ID',
                channelUrl : '//domain.com/channelUrl.php',
                status  : true, 
                cookie  : true,
                xfbml   : true
            });

        //Event fired when the plugin has been completely loaded
        FB.Event.subscribe('xfbml.render',
            function(response) {
                //alert('You liked the URL: ' + response);
                var w = (typeof window.innerWidth != 'undefined')?
                           window.innerWidth
                        :(typeof document.documentElement != 'undefined'
                         && typeof document.documentElement.clientWidth !=
                         'undefined' && document.documentElement.clientWidth != 0) ?
                           document.documentElement.clientWidth
                        : document.getElementsByTagName('body')[0].clientWidth;

                w *= .950; //95% for best fit on mobile screens
                //RESIZE
                $(".fb-comments").css("width",w);
                $(".fb-comments > span").css("width",w);
                //Some days ago the next line would be sufficient                       
                $(".fb_ltr").css("width",w);
                //Now the modify of the span width is necessary to do the work

                $("#div_loading_gif").remove();



            }
        );

      };

      //cargando SDK Asíncronamente
      (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
      }(document));



    </script>

    <div id="div_loading_gif" style="width:100%;  height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >

    </div>

    <!--Usando jquery modificar el style de el div de clase fb_ltr
    cambiar el ancho por el de la pantalla-->
    <div class="fb-comments"
        style="padding:0 auto;"
        data-href="http://domain.com/comments.html" 
        data-width="100px" 
        data-num-posts="5"
        data-mobile="false"
        >
    </div>



</body>

Я думаю max-width лучше, чем width в данном случае, и это работает для меня:

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

это работает для меня

/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
    display: inline !important;
}

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

Я только что попробовал это, и кажется, что теперь есть <div> внутри iframe это имеет фиксированную ширину, что означает, что теперь вам действительно нужно удалить style тег с javascript, чтобы сделать его жидким.

EDIT: вы не можете получить доступ к содержимому iframe с помощью JS, потому что он поступает из другого домена

создайте пустой div, где вы хотите, чтобы поле facebook like было (или другой социальный плагин, работает универсально) с классом 'FB-container', а затем добавьте следующий jQuery:

$(document).ready(function(){
    $('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});

p.s. Вы можете заменить Родительский DIV любым другим элементом, который вы хотите, чтобы поле комментариев соответствовало и WWW.YOURSITEHERE.COM с вашего сайта

это работает для меня:

 $('.fb-comments').attr('data-width', '100%');

Я получил его работу с помощью небольшого jQuery и установки атрибута "ширина данных" при загрузке страницы и при изменении размера окна. Проблема, с которой я столкнулся со всеми подходами CSS, заключается в том, что некоторые комментарии и кнопки были скрыты за пределами полей контейнера или переполнены.

вот мой $ 0.02, надеюсь, это поможет. Кроме того, просто установите селектор #content на то, что вы хотите, чтобы поле комментариев соответствовало, например, контейнерному div...

библиотека jQuery(документ).готов(функция() {

//check for device width and reformat facebook comments
function fbCommentWidth() {
    jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run on resize, and reparse FB comments box    
jQuery(window).on('resize',function() {
    fbCommentWidth();
    FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();

});

вот как это работает: просто добавьте эту ширину данных= " 100%" Вот пример:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>

вот что у меня получилось:

(function() {
    window.addEventListener('load', updateWidth);
    window.addEventListener('resize', debounce(function () {
        updateWidth();
        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            FB.XFBML.parse();
        }
    }, 1000));

    function updateWidth() {
        $('.fb-like, .fb-comments').each(function () {
            var el = $(this);
            var width = el.parent().width();
            el.attr('data-width', width);
        })
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
})();