Question

有没有办法强制像按钮（样式为button_count）显示零喜欢？

这是首选的解决方案，以匹配Twitter和Goolge +1。

作为一个不可接受的选择：根据按钮计数器的存在动态移动间距的任何提示？

Answer 1

我所做的就是在Facebook上放置一个零点数的气球，看起来就像Facebook一样。棘手的部分是把它放在正确的位置，因为显然每个浏览器的类似按钮本身的宽度是不同的，因为它在一个单独的iframe中，所以没有办法依赖它的流程。

以下是它的外观：

DOM（fb_bg_count_balloon中的所有内容均来自facebook的iframe）：

<div class="fb_like_container">
    <div class="fb_bg_count_balloon">
        <table cellspacing="0" cellpadding="0"><tbody><tr>
            <td>
                <div class="fb_count_nub">
                    <s></s><i></i>
                </div>
            </td>
            <td><div class="fb_count_count">0</div></td>
        </tr></tbody></table>
    </div>
    <div class="fb_like_foreground">
        <fb:like href="http://yoururl.com/path" send="false" layout="button_count" width="90"></fb:like>
    </div>
</div>

SCSS（我发现它比普通的CSS更具可读性 - 这就是在这里启用嵌套选择器的原因 - 你可以通过展平嵌套很容易地将它转换为有效的纯CSS：）

.fb_like_container {
    width:90px;
    position:relative;

    .fb_bg_count_balloon {
        position:absolute;
        top: 1px;
        right: 13px;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        color: #333;
        .fb_count_nub {
            display: block;
            position: relative;
            z-index: 2;
            height: 0;
            width: 5px;
            top: -5px;
            left: 2px;

            s, i {
                display: block;
                border-style: solid;
                border-color: transparent;
                border-right-color: #D7D7D7;
                border-width: 4px 5px 4px 0;
                position: relative;
                top: 1px;
            }
            i {
                left: 2px;
                top: -7px;
                border-right-color: white;
            }
        }
        .fb_count_count {
            background-color: white;
            border-style: solid;
            border-color: #D1D1D1;
            border-width: 1px;
            height: 14px;
            margin-left: 1px;
            min-width: 15px;
            padding: 1px 2px 1px 2px;
            text-align: center;
            line-height: 14px;
            white-space: nowrap;
        }
    }
    .fb_like_foreground {
        position:absolute;
        left: 0;
        top: 0;
        z-index:3;
    }
}

IE的快乐调整：

<!--[if IE 9]>
    <style type="text/css">
        .fb_like_container .fb_bg_count_balloon {
            right: 16px;
        }
    </style>
<![endif]-->
<!--[if lte IE 8]>
    <style type="text/css">
        .fb_like_container .fb_bg_count_balloon {
            top: 2px;
            right: 17px;
        }
    </style>
<![endif]-->

这种方式的问题是：

如果facebook改变了什么，它可能会破坏（至少在视觉上）
加载时，直到facebook解析你的fb：就像，你只有气球。
FB的“fb_count_nub”令人厌恶，但我觉得非常便携 - 你可以用图像替换它（fb_bg_count_balloon的内容）。

Answer 2

你可以假装它，我做的是我找一个已经有喜欢的帖子，使用firebug我用“0”取代了计数然后截图，然后我裁剪（默认宽度：90像素。高度：20像素。）类似按钮，现在为零，并将其作为相似按钮的背景。

<style>
    div.like {background:url(likewithzerocount.png) no-repeat left center}
</style>
<div class="like">
    <fb:like href="#" send="false" layout="button_count" width="90" show_faces="false"></fb:like>
</div>

在button_count Like按钮中显示零

2 个答案: