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

时间:2011-06-28 00:28:11

标签: facebook-social-plugins responsive-design

我正在围绕“响应式设计”概念开发一个网站,但facebook社交插件是静态宽度,并在重新调整大小时“打破”布局。

使用媒体查询,我已将插件设置为隐藏在低分辨率浏览器(移动设备等)上。但是,在桌面浏览器上,当浏览器窗口的大小变小,但不能小到隐藏插件时,它们会突破布局。

如何设置Facebook社交插件的流畅度?

29 个答案:

答案 0 :(得分:62)

这些方法都没有奏效但是使用了这个想法,以下内容对我有用:

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

答案 1 :(得分:56)

我找到了一个使用css的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/

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

答案 2 :(得分:35)

正确的工作答案是我在这里找到的东西的组合。米克尔的答案是一个良好的开端:

Facebook Developers Platform link

这说:

  

我们已经解决了这个问题。从现在开始,您可以指定宽度   为100%(例如数据宽度=“100%”)以获得流畅的布局。文件是   更新过: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;
}

(感谢Black_Stormy的加入!)

答案 3 :(得分:9)

我设法通过使用此代码使其工作:

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

提示:您应该根据div类更改您的CSS。

答案 4 :(得分:7)

虽然这是一个老问题,但现在这是“Facebook评论插件响应”的谷歌搜索结果,因此它仍然具有相关性。

其他答案中的解决方法不再需要了,因为FB最近(2014年5月)在最后解决了这个问题。

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

  

我们已经解决了这个问题。从现在开始,您可以指定宽度   为100%(例如数据宽度=“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 :(得分:5)

它肯定只适用于在样式中添加.fb-comments span

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

答案 6 :(得分:5)

如果你使用官方的wordpress facebook插件,由于移动嗅探facebook。

  

移动版将在移动设备上自动显示   检测到用户代理。您可以通过设置来关闭此行为   移动参数为false。请注意:移动版本忽略了   宽度参数,而不是流体宽度为100%   在纵向/横向切换情况下很好地调整大小。你可能需要   调整您的移动网站的CSS以利用此功能   行为。如果愿意,您仍然可以通过a控制宽度   容器元素。   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上设置设置,那就太好了。

答案 7 :(得分:4)

接受的答案对我不起作用。

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

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

这是完全流动的(在osx ff&amp; safari,ios6中测试)。

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

答案 8 :(得分:3)

看起来这篇文章不是很老,但答案对我来说并不适合。我不得不将它添加到我的样式表中......

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

答案 9 :(得分:2)

关于此调整大小的重要说明:如果Facebook评论脚本检测到您在移动设备上,则会打破此问题。但是,如果您使<fb:comments>标记包含属性值mobile="false",那么(现在)Facebook的脚本将尊重您的CSS。

答案 10 :(得分:2)

对于那些喜欢使用 HTML5 代码进行Facebook插件的用户,例如Activity FeedLike 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;
    }
}
  • 不适用于评论或基于百分比的宽度;如果你需要纯粹的流动性,请坚持使用iframe代码。
  • 此页面顶部的css-tricks链接的H / T到Alan。 (:

答案 11 :(得分:2)

我使用这个简单的脚本工作了(参见链接中的代码)。

https://gist.github.com/2111366

您必须对信息进行一些更改,以便使用Facebook App ID和页面网址。

此解决方案正在使用jQuery,因此您必须了解该工作的方式,但是一旦您获得脚本来执行响应式设计,就可以在页面加载或调整页面大小时使用。

答案 12 :(得分:2)

将它放在你的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

答案 13 :(得分:2)

截至2015年9月,将不知情的群众与我自己解决这个问题的方法联系起来:

Facebook为名为fb-page的{​​{1}}窗口小部件提供了一个选项,该窗口小部件(根据docs)应跟踪父级的宽度(最大宽度为adapt-container-width })。使用500px重新渲染时,尽管您在实际的小部件本身上设置了内容,但小部件似乎仍然卡在父​​级容器宽度的奇怪值上。目前,这种方法运作良好:

  1. 使用FB的代码生成器(位于this page顶部)
  2. 创建元素
  3. 将事件绑定到FB.XFBML.parse()的{​​{1}}方法,(可选地使用window并设置合理限制以防止浏览器因中间请求而过载
  4. 等待Facebook公开更多的小部件API,以便我们可以看到它到底发生了什么

    resize
  5. 结合以下javascript:

    _.debounce

答案 14 :(得分:1)

我不知道评论,但是使用链接框,你所要做的就是直接从Facebook使用iframe选项并以百分比形式切换宽度(以像素为单位),它将根据它所在列的宽度。

答案 15 :(得分:1)

Facebook对评论插件中输出的标记做了一些更改。我使用的是HTML5版本。从上面分享的这个修正的CSS做了诀窍。

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

答案 16 :(得分:1)

这是一个小小的工作,将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>");
        });

答案 17 :(得分:1)

这是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”元素是like按钮必须适合我的设计的元素。调整大小工作直到div变得如此之小,以至于div.fb-like中的data-layout属性需要从“standard”更改为占用较少水平空间的替代。我是新手,所以我不确定这是否是制作类似按钮代表的最优雅的解决方案。我希望从这个问题的某个人那里看到这个问题的答案。

$(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');
});

答案 18 :(得分:1)

这是一个完整的例子,使用jQuery,具有响应宽度和加载图像。 Alan和Jubair的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>

答案 19 :(得分:1)

这是一些jquery应该在输出标记的更改中持续存在,因为它使用正则表达式仅重写宽度,只留下样式标记的其余部分。

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

答案 20 :(得分:1)

使用inspect元素查看正在生成的代码。在某些情况下,如Wordpress Facebook插件,他们使用不同的“ID”,一旦你发现使用的ID添加

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

这并不总能做到我学习的诀窍。虽然你可以改变颜色和一些尺寸使其响应仍然是非常错误的。它似乎不喜欢百分比,并没有看到它的盒子的大小,所以这不起作用。我正在玩@media查询以根据浏览器窗口的大小调整大小。

如果它识别宽度会很好,但@media似乎是唯一的方法。

答案 21 :(得分:0)

以下是我最终的结果:

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

答案 22 :(得分:0)

它是如何工作的:只需添加此数据宽度=&#34; 100%&#34; 这是一个例子:

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

答案 23 :(得分:0)

我使用一个小jQuery并在页面加载和窗口大小调整时设置“data-width”属性。我遇到的所有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();

});

答案 24 :(得分:0)

这对我有用:

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

答案 25 :(得分:0)

使用类'fb-container'创建一个空的div,你想要facebook like box(或其他社交插件,普遍适用),然后添加以下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与您的网站

答案 26 :(得分:0)

我刚刚尝试了这一点,现在<div>内的iframe似乎有一个固定的宽度,这意味着您现在实际上需要使用javascript删除style标记让它变得流畅。

编辑:您无法使用JS访问iframe内容,因为它来自其他域

答案 27 :(得分:0)

这对我有用

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

答案 28 :(得分:0)

在这种情况下,我认为max-width优于width,对我有用:

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