Можно ли установить плавную ширину для социальных плагинов Facebook? - PullRequest
Новая
       13

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

72 голосов
/ 28 июня 2011

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

Используя медиа-запросы, я установил плагины, чтобы скрывать их в браузерах с низким разрешением (мобильные и т. Д.). Однако в настольных браузерах, когда размер окна браузера меньше, но не настолько мал, чтобы скрыть плагины, они вырываются из макета.

Есть ли способ установить плавную ширину для социальных плагинов Facebook?

Ответы [ 29 ]

62 голосов
/ 21 апреля 2012

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

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}
56 голосов
/ 17 октября 2011

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

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
35 голосов
/ 24 сентября 2014

Правильный рабочий ответ - это комбинация вещей, которые я нашел здесь. Ответ Микеля - хорошее начало:

Ссылка на платформу разработчиков Facebook

Это говорит:

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

Но ... Это загрузит ширину того, что доступно плагину во время загрузки. При изменении размера страницы она останется той же ширины, что и при загрузке страницы. Чтобы это исправить - и сделать действительно адаптивную версию плагина Facebook Social - добавьте в свой CSS следующее: 

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

Это приведет к изменению размера плагина в соответствии с доступным пространством при изменении размера окна.

Если вы хотите, чтобы этот код работал для плагина страницы, измените имя класса 'fb-comments' на 'fb-page': 

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

(спасибо за добавление Black_Stormy!)

9 голосов
/ 22 апреля 2012

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

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

7 голосов
/ 08 июня 2014

Хотя это старый вопрос, теперь это лучший результат Google для "отзывчивого плагина комментариев на Facebook", поэтому он по-прежнему актуален.

Обходные пути в других ответах больше не нужны, так как 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.

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

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

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

5 голосов
/ 19 июня 2012

Если вы используете официальный плагин WordPress для Facebook из-за мобильного сниффинга, сделайте Facebook.

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

Вам нужно будет изменить facebook / social-plugins / fb-comments.php в строке 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;}

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

5 голосов
/ 27 июля 2013

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

.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
4 голосов
/ 18 ноября 2012

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

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

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;
}
3 голосов
/ 29 февраля 2012

Похоже, этот пост не очень старый, но ответ не работает для меня.Мне пришлось добавить это в мою таблицу стилей ... 

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

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

2 голосов
/ 06 сентября 2015

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

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

  1. Создание элемента с использованием генератора кода FB (вверху эта страница )
  2. Привязать событие к windowresize метод (опционально с использованием _.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
Страница:
...