facebook喜欢按钮：响应宽度

Question

对于 facebook like 按钮，我需要能够在桌面分辨率（539 像素）上保持默认宽度，并在屏幕分辨率低于 640 像素（移动设备）时将宽度更改为 100%。这不起作用，因为类似 fb 的 div 依赖于一个名为“data-width”的属性，该属性在 src html 中设置远程动态加载的 iframe 宽度和子元素宽度。到目前为止，我已经尝试过：

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

当我的屏幕分辨率或移动设备较低时，如何更改“数据宽度”值？

作为临时措施，我做了以下措施来防止点赞按钮破坏移动设备上的布局：

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

这并不理想，因为用户必须向左滑动才能查看任何溢出，但在其他人提出可行的建议之前，这是我能想到的唯一解决方案。附上截图（iOS 7 iPhone & Android 4.3.1）...

Answer 1

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

编辑：

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

Answer 2

尝试使用 facebook like button 的 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%，将高度更改为 50px。 URL 中的宽度是 225，这是 facebook like 的最小值。