Facebook点赞按钮：响应式宽度

Question

Facebook点赞按钮：响应式宽度

cssfacebookresponsive-designfacebook-likebox

8

对于Facebook的点赞按钮，我需要在桌面分辨率下保持默认宽度（539像素），当屏幕分辨率低于640像素时（移动设备）将其宽度改为100％。这不起作用，因为fb-like div依赖于一个名为"data-width"的属性，该属性设置了远程动态加载的iframe宽度以及src html中的子元素宽度。到目前为止，我尝试过：

<style>
@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important}
}
@media only screen and (min-width: 960px) {
    div.fb-like {width:539px !important}
}
</style>

<div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div>

当我使用较低的屏幕分辨率或移动设备时，如何更改"data-width"值？

作为临时措施，我已经采取了以下措施，以防止在移动设备上破坏布局：

@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important; overflow-x:auto}
}

这并不理想，因为用户必须向左滑动才能查看任何溢出内容，但这是我能想到的唯一解决方案，直到其他人有一个可行的建议。其中，iOS 7 iPhone和Android 4.3.1的屏幕截图如下所示：
在Android 4.3.1设备上呈现的Facebook点赞按钮

- ChrisJM

你能否尝试使用jQuery检测视口的宽度并更改data-width的属性？这是一个选项吗？ - Thilak Rao

2个回答

2

尝试使用Facebook点赞按钮的Iframe代码，而不是HTML5。

看一下这个：

<iframe src="//www.facebook.com/plugins/like.php?href=
https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;
width=225&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;
share=true&amp;height=35&amp;appId=161427297222786" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:100%; height:50px;" 
allowTransparency="true"></iframe>

我已将内联CSS的宽度更改为100％，高度更改为50像素。 URL中的宽度为225，这是Facebook喜欢的最小宽度。

- Abhishek Sachan

谢谢，@asachanfbd 在 Fex 回答之前我没有看到你的评论。不过还是感谢您提供的额外建议！ - ChrisJM

@ChrisJM 你应该标记一个答案为正确的，这样其他用户才能依赖它。 - Abhishek Sachan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fex del Sollo · Accepted Answer

尝试将.fb-like类放入一个带有style="width:100%;的div包装器中。现在，您可以添加像$(window).bind("load resize", function(){}这样的内容，以获取浏览器的实际宽度并调整喜欢的按钮大小。

编辑：

<script>
    var container_width_current = $('#WRAPPER-DIV').width();

    $(window).bind("load resize", function(){    
         var container_width_new = $('#WRAPPER-DIV').width();

         if (container_width_new != container_width_current) {
             container_width_current = container_width_new;

             $('#container').html('<div class="fb-like-box" ' +
             'data-href="https://www.facebook.com/adobegocreate" ' +
             'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
             'data-stream="true" data-header="true"></div>');
             FB.XFBML.parse();
         }
    }); 
</script>

编辑 #2：

这是一种快速的 CSS 方法：

#u_0_0 {
    width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
    width: 100% !important;
    height: auto !important;
}