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

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

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

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

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

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

Ответы [ 29 ]

1 голос
/ 19 сентября 2011

Это JQuery и может быть частью ответа на ваш вопрос.Я использую HTML5-версию кнопки «Нравится»: 

<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» - это элемент, в который кнопка «Мне нравится» должна вписаться в мой дизайн.Изменение размера работает до тех пор, пока div не станет настолько маленьким, что атрибут размещения данных в div.fb-like должен быть изменен со "стандартного" на альтернативный, который занимает меньше горизонтального пространства.Я новичок в этом, поэтому я не уверен, что это самое элегантное решение, чтобы сделать кнопку «Мне нравится» отзывчивой.Я хотел бы получить ответ на этот вопрос от кого-то, кто является большим экспертом в этой области.

$(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');
});
0 голосов
/ 16 мая 2018

Вот что я закончил: 

(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);
        };
    }
})();
0 голосов
/ 16 января 2014

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

/* 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;
}
0 голосов
/ 03 декабря 2013

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

.fb-comments, .fb-comments iframe[style], .fb-comments span {
  width: 100% !important;
}
0 голосов
/ 08 августа 2014

Вот как это работает: просто добавьте эти data-width = "100%" Вот пример: 

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
0 голосов
/ 01 августа 2014

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

Вот мои $ 0,02, надеюсь, это поможет. Кроме того, просто установите селектор #content в любое поле для комментария, например, контейнер div ...

jQuery (документ) .ready (function () {

//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();

});

0 голосов
/ 13 марта 2014

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

РЕДАКТИРОВАТЬ: Вы не можете получить доступ к содержанию iframe с JS, потому что это происходит из другого домена

0 голосов
/ 22 мая 2014

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

 $('.fb-comments').attr('data-width', '100%');
0 голосов
/ 31 марта 2014

Создайте пустой div, где вы хотите, чтобы поле, подобное Facebook, было (или другой социальный плагин, работающий универсально) с классом '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. Вы можете заменить PARENT DIV любым другим элементом, которому вы хотите, чтобы поле для комментариев соответствовало, и WWW.YOURSITEHERE.COM с вашим сайтом

Страница:
...