Я разрабатываю сайт вокруг концепции "отзывчивого дизайна", но социальные плагины facebook представляют собой статическую ширину и "ломают" макет при изменении размера.
Используя медиа-запросы, я установил плагины для скрытия в браузерах с низким разрешением (mobile и т.д.). Однако в настольных браузерах, когда окно браузера изменяется меньше, но не так мало, чтобы скрыть плагины, они выходят из макета.
Любой способ установить ширину жидкости для социальных плагинов Facebook?
Правильный рабочий ответ - это комбинация вещей, которые я нашел здесь. Ответ Микеля - хорошее начало:
Платформа разработчиков Facebook для разработчиков
Это говорит:
Мы поставили для этого исправление. С этого момента вы можете указать ширину как 100% (например, data-width = "100%" ), чтобы получить макет жидкости. Документы также обновлено: https://developers.facebook.com/docs/plugins/commentsБлагодарим за терпение.
Но... Это будет загружать ширину того, что доступно плагину во время загрузки. При изменении размера страницы она останется той же ширины, что и при загрузке страницы. Чтобы исправить это - и создайте истинную отзывчивую версию Facebook Social Plugin - добавьте следующее в свой 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!)
Ни один из этих методов не работал, но, используя эту идею, для меня работало следующее:
.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", поэтому он по-прежнему имеет значение.
Обходные пути в других ответах больше не нужны, поскольку 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;
}
Это заставит плагин адаптироваться к доступному в настоящее время пространству при изменении размера браузера.
Если вы используете официальный плагин wordpress facebook из-за мобильного флип-фейсбука, сделайте это.
Мобильная версия будет автоматически отображаться, когда мобильное устройство пользовательский агент обнаружен. Вы можете отключить это поведение, установив параметр mobile равен 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;}
Было бы неплохо, если бы они могли либо исправить свою мобильную версию, либо установить параметр в свой графический интерфейс плагинов.
Он определенно будет работать только для добавления стиля .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 и сафари, 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;}
.Fb_iframe_widget и .fb_iframe_widget [style] оба казались важными.
У меня это работает, используя этот простой script (см. код в ссылке).
https://gist.github.com/2111366
Вы должны внести несколько изменений в информацию, чтобы использовать свой идентификатор Facebook и URL своей страницы.
Это решение использует jQuery, поэтому вам нужно будет понять, как это работает, но как только вы получите script, чтобы выполнить свой отзывчивый дизайн, будет работать при загрузке страницы или при изменении размера страницы.
Важное замечание об этом изменении размера: если комментарий Facebook script обнаруживает, что вы находитесь на мобильном устройстве, это нарушает это. Но если тэг <fb:comments> содержит значение атрибута mobile="false", то (на данный момент) скрипты Facebook будут уважать ваш CSS.
Для тех, кто предпочитает использовать HTML5 код для плагинов Facebook, например Activity Feed или Like Box:
/******* 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;
}
}
Просто поместите это либо в свой 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>
Ссылка: http://dwij.co.in/making-facebook-comments-responsive
Объединяя неосведомленные массы с моим собственным решением этой проблемы, по состоянию на сентябрь 2015 года:
Facebook предоставляет возможность для виджета fb-page, называемого adapt-container-width, который (согласно docs, должен отслеживать (максимальная ширина 500px). При рендеринге с помощью FB.XFBML.parse() виджет, похоже, застрял на странном значении для ширины родительского контейнера, несмотря на то, что вы установили на самом самом виджете. Пока это работает достаточно хорошо:
window resize (необязательно используя _.debounce с разумным пределом, чтобы предотвратить перегрузку браузера промежуточными запросамиПодождите, пока Facebook выведет больше API-интерфейса виджетов, чтобы мы могли видеть, что происходит, черт возьми
<div class="fb-page"
data-adapt-container-width="false" <!-- This bit 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-версию аналогичной кнопки:
<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 не станет настолько малым, что атрибут data-layout в 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');
});
Используйте элемент проверки, чтобы узнать, какой код генерируется. В некоторых случаях, таких как плагины Wordpress Facebook, они используют разные "идентификаторы" и после того, как вы обнаружите, что используемый идентификатор добавляет
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
Это не всегда делает трюк. В то время как вы можете менять цвета, а некоторые размеры делают его отзывчивым, все еще очень плохо. Кажется, он не любит проценты и не видит размер окна, так что это не работает. im toying с выполнением @media запросов для изменения размера в зависимости от размера окна браузера.
Было бы неплохо, если бы он узнал ширину, но @media кажется единственным способом.
Facebook внесла некоторые изменения в выведенную разметку из плагина комментариев. Я использую версию HTML5. Этот измененный CSS из того, что было разделено выше, сделал трюк.
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
Вот некоторый jquery, который должен сохраняться в изменениях в выходной разметке, поскольку он использует выражение регулярного выражения, чтобы переписать ширину только, оставив остальную часть тега стиля.
Вам нужно указать правильный идентификатор контейнера или селектор, заменив мой пример: # 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 Plugin в 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 Alan и Jubair прокомментирован в коде.
Это отлично работает в веб-браузере Android
<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, в котором вы хотите, чтобы фреймворк, как ящик (или другой социальный плагин, работает повсеместно) с классом "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 со своим сайтом
Это работает для меня:
$('.fb-comments').attr('data-width', '100%');
Я работал с небольшим jQuery и устанавливал атрибут "ширина данных" при загрузке страницы и при изменении размера окна. Проблема, с которой я столкнулся со всеми подходами CSS, заключается в том, что некоторые комментарии и кнопки были скрыты за пределами полей контейнера или переполнены.
Вот мои $0,02, надеюсь, что это поможет. Кроме того, просто установите селектор #content на то, что вы хотите, чтобы окно комментариев соответствовало, например, div контейнера...
jQuery (document).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();
});
Как это работает: просто добавьте эту ширину данных = "100%" Вот пример:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>