button - 在 button_count 中显示零 喜欢按钮

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:like，您将只有气球。

FB 的“fb_count_nub”很恶心，但我想它很便携——你可以用一个图像替换它(fb_bg_count_balloon 的内容)。