gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:49:18 25 4
gpt4 key购买 nike

有没有办法强制喜欢按钮(样式为 button_count)显示零个喜欢?

这是匹配 Twitter 和 Goolge +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 的内容)。
  • 关于button - 在 button_count 中显示零 喜欢按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7476603/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com