是否可以为Facebook的社交插件设置stream畅的宽度?

我正在开发一个围绕“响应式devise”概念的网站,但Facebook社交插件是静态宽度,当重新resize时会“破坏”布局。

使用媒体查询,我已经设置插件隐藏在低分辨率的浏览器(手机等)。 但是,在桌面浏览器上,当浏览器窗口重新缩小尺寸,但不会太小以隐藏插件时,它们会突破布局。

任何方式来设置Facebook社交插件的stream体宽度?

正确的工作答案是我在这里find的东西的组合。 米克尔的回答是一个好的开始:

Facebook开发者平台链接

这说:

我们已经为此做了一个修复。 从现在开始,您可以指定宽度为100%(例如data-width =“100%”)以获得stream畅的布局。 文档也被更新: https : //developers.facebook.com/docs/plugins/comments感谢您的耐心等待。

但是…这会在加载时加载插件可用的宽度。 当您调整页面大小时,它将保持与加载页面时相同的宽度。 为了解决这个问题 – 制作Facebook社交插件的真正的响应版本 – 在你的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; } 

(感谢您joinBlack_Stormy!)

这些方法都没有工作,但使用这个想法,以下为我工作:

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

我find了一个使用CSS的解决scheme。 灵感来自这篇文章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类。

虽然这是一个老问题,但现在这是谷歌对“facebook注释插件响应”的结果,所以它仍然是相关的。

其他答案中的解决方法已经不再需要了,因为FB最近(2014年5月)已经将其解决了。

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

我们已经为此做了一个修复。 从现在开始,您可以指定宽度为100%(例如data-width =“100%”)以获得stream畅的布局。 文档也被更新: https : //developers.facebook.com/docs/plugins/comments感谢您的耐心等待。

所以,现在你可以将你的HTML更新为例如

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

而且不需要任何额外的CSS解决方法。

编辑:这将创build插件,以适应其宽度在加载时的可用空间。 当您调整浏览器窗口的大小时,插件将保持在最初的宽度。 为了使它真正的响应添加到您的CSS:

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

调整浏览器的大小时,会导致插件适应当前的可用空间

如果你使用官方的WordPress的插件由于移动嗅探Facebook做的。

当检测到移动设备用户代理时,移动版本将自动显示。 您可以通过将mobile参数设置为false来closures此行为。 请注意:移动版本忽略宽度参数,而是具有100%的stream体宽度,以便在纵向/横向切换情况下调整好尺寸。 您可能需要调整您的移动网站的CSS以利用此行为。 如果喜欢,您仍然可以通过容器元素控制宽度。 http://developers.facebook.com/docs/reference/plugins/comments/

您将需要更改第35行的facebook / social-plugins / fb-comments.php。

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

如果他们能够修复他们的移动版本或者在他们的插件GUI上设置一个设置,那将是非常好的。

它绝对会工作,只是添加.fb-comments span风格。

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

接受的答案没有为我工作。

我在Craig Bailey的评论中发现了这个:

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

这完全是stream体(在osx ff&safari,ios6中testing)。

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

看起来这个post不是很老,但答案不适合我。 我不得不添加到我的样式表…

 #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 [风格]似乎都很重要。

我已经使用这个简单的脚本工作(请参阅链接中的代码)。

https://gist.github.com/2111366

您必须对信息进行一些更改,以便使用您的Facebook应用程序ID和您的页面URL。

这个解决scheme是使用jQuery,所以你将不得不了解如何工作,但一旦你得到脚本来执行你的响应式devise将工作在页面加载或调整页面时。

关于这个resize的重要说明:如果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; } } 
  • 不适用于评论或基于百分比的宽度; 如果您需要纯stream动性,请坚持使用iframe代码。
  • H / T到Alan的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> 

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

到2015年9月为止,join了我自己解决这个问题的无知的群众:

Facebook提供了一个名为adapt-container-widthfb-page小部件的选项,根据文档 ,它应跟踪父宽度(最大宽度为500px )。 当使用FB.XFBML.parse()渲染时,小部件似乎卡在父容器宽度的一个奇怪的值上,尽pipe你在实际的小部件本身上设置了什么。 目前来看,这样做效果不错:

  1. 使用FB的代码生成器创build元素(在本页顶部)
  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 

这是JQuery,可能是你的问题的答案的一部分。 我正在使用类似button的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”元素是类似button在我的devise中必须使用的元素。 resize的工作,直到div得到如此之小,div.fb样的数据布局属性需要从“标准”更改为一个替代,占用较less的横向空间。 我是新来的,所以我不确定这是不是最好的解决scheme,使像buttonrepsonsive。 我想从这个问题上更专业的人那里看到这个问题的答案。

 $(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插件,他们使用不同的“ids”,一旦你find正在使用的ID添加

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

这并不总是在学习的窍门。 虽然你可以改变颜色和一些尺寸使其响应仍然是非常错误的。 它似乎不喜欢百分比,并没有看到它在这个盒子的大小,所以这是行不通的。 即时通讯做@media查询来调整它的大小取决于浏览器窗口的大小。

如果它能够识别宽度,但@media似乎是唯一的方法,那将是非常好的。

Facebook对注释插件输出的标记进行了一些更改。 我正在使用HTML5版本。 从上面共享的这个修改后的CSS做的伎俩。

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

这里有一些jquery应该坚持对输出标记进行修改,因为它使用正则expression式来重写宽度,而剩下的style标签则是独立的。

您需要指定正确的容器ID或select器,replace我的示例:#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); 

我不知道评论,但在链接框中,你所要做的就是直接使用来自Facebook的iframe选项,并以百分比的forms输出像素的宽度,并根据宽度列中。

这里有一个小的解决方法,将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,带有响应宽度和加载图片。 Alan和Jubair的CSS代码在代码中进行了注释。

这在Android的webview中工作正常

 <html> <head> <title>Title</title> <script src="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-widthwidth更好,对我而言,

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

我刚刚尝试过,现在在iframe中有一个固定宽度的<div> ,这意味着您现在实际上需要使用javascript来移除style标记,以使其变得stream畅。

编辑:你不能访问JS的iframe内容,因为它来自另一个域

创build一个空的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>'); }); 

PS你可以用你想要的评论框匹配和WWW.YOURSITEHERE.COM与您的网站任何其他元素replace父子DIV

这适用于我:

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

我得到它使用一个小jQuery的工作,并设置“数据宽度”的属性,当页面加载和窗口resize。 所有CSS方法遇到的问题是,一些注释和button被隐藏在容器边缘之外或溢出。

这是我的$ 0.02,希望它有帮助。 此外,只需将#contentselect器设置为任何你想要评论框匹配,如一个容器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>