Question

在Like-Button的setup dialog中，布局只有两个选项：

Dead link - Alternative 1 Dead link - Alternative 2

不幸的是，我雇主网站的数字远不及22'000，所以权力已经决定我们不应该显示“喜欢”的数量，直到这个数字对我们有利。据我所知，我无法通过Javascript或CSS访问按钮的布局（它位于facebook提供的iframe中）。还有其他方法可以隐藏计数吗？

Answer 1

如果您执行overflow:hidden，请记住它也会隐藏XFBML版本中出现的评论框...用户喜欢它之后。如果你这样做最好......

/* make the like button smaller */
.fb_edge_widget_with_comment iframe
{
    width:47px !important;
}

/* but make the span that holds the comment box larger */
span.fb_edge_comment_widget.fb_iframe_widget iframe
{
    width:401px !important;
}

Answer 2

编码显示“推荐”的“喜欢”按钮宽度为84px，“喜欢”按钮为44像素，这样可以节省一些时间，像我这样的CSS人员需要隐藏我的页面当前不受欢迎的程度！我把这个代码放在我的主页上，所以最初我不希望它宣传我喜欢的内容很少。

Answer 3

接受的答案很好，但要注意多语言页面。文本长度不同：

英语：喜欢

荷兰语：Vind ik leuk

德语：Gefälltmir

只是抬头。

Answer 4

只包含div中的iframe，将宽度设置为按钮的宽度，将overflow设置为hidden 即。

  <div style="width:52px;overflow:hidden;">
      <fb:like layout="button_count"></fb:like>

      <div id="fb-root"></div>
          <script>
              window.fbAsyncInit = function() {
                  FB.init({
                    appId: 'YOUR_APP_ID',
                    status: true,
                    cookie: true,
                    xfbml: true
                  });
              };
              (function() {
                  var e = document.createElement('script');
                  e.type = 'text/javascript';
                  e.src = document.location.protocol +
                  '//connect.facebook.net/en_US/all.js';
                  e.async = true;
                  document.getElementById('fb-root').appendChild(e);
              }());
          </script>
      </div>

Answer 5

现在Facebook正式支持。只需选择“按钮”布局即可。

https://developers.facebook.com/docs/plugins/like-button/

Answer 6

如果您使用Facebook的javascript按钮（这样您可以捕获类似事件），这就是我们必须做的事情：

由于Facebook最近以评论对话框显示的方式进行了更改，我们不得不改变隐藏它的方式。他们显示评论对话框的方式是“移动”我的overflow：hidden元素内的内容，以便用户在点击“赞”按钮后看起来非常奇怪。

除了添加一个包含'overflow：none'样式的包装元素外，您还需要隐藏Facebook放在页面上的注释元素：

样式：

span.no_overflow {
  overflow: none;
  width: 50px;
}

.no_overflow span.fb_edge_comment_widget.fb_iframe_widget {
  display: none;
}

标记：

<span class="no_overflow">
<fb:like></fb:like>
</span>

我们仍在使用fb：尽管像标记一样。我没有使用Facebook现在在其网站上提供的基于div的新标记对此进行测试。

Answer 7

我知道已经发布了许多解决方案，但我的解决方案仍有些不同。它适用于类似按钮的HTML5版本，仅使用css隐藏计数框。不要忘记添加appId进行测试。

CSS：

<style type="text/css">
    .fb-like span {
        display: block;
        height: 22px;
        overflow: hidden;
        position: relative;
        width: 140px /* set this to fit your needs when support international sites */;
    }

    .fb-like iframe {
        height: 62px;
        overflow: hidden;
        position: absolute;
        top: -41px;
        width: 55px;
    }
</style>

FB Like Button：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>

Answer 8

似乎FaceBook最近改变了一些代码 - 每当我点击＆＃34; Like＆＃34;时，内容都会向左跳转，从而弄乱了UI。没有CSS / JS技巧使它工作。我选择了一个更简单的解决方案，使用 iframe 。

通知 - 虽然某些设备已经支持iFrame，但并非所有移动设备都支持iFrame。 iFrames实际上是旧的，根本不推荐，但它为我做了诀窍。

让我们从facebook获取默认的生成脚本，并生成类似iFrame的框;

Click here to generate like button

转到＆＃34; Box_Count＆＃34;风格，顶部有一个柜台。

当您按＆＃34;抓取代码＆＃34;时，请转到iFrame代码。你会得到类似的东西;

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=1234567891011" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45056px; height:90px;" allowTransparency="true"></iframe>

现在让我们在那里包裹一个div。

<div class="like_wrap">
    <iframe (...)></iframe>
</div>

给它以下CSS：

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden;
}

现在你可能会看到柜台的左上角。现在我们必须修复iFrame。给它上课;

<iframe class="like_box" (...)> </iframe>

并通过添加＆＃34;＆amp; locale = en_US＆＃34;使其始终为英语。到URL。这是为了防止在其他国家出现奇怪的布局 - 在荷兰，这将是＆＃34; Vind ik leuk＆＃34;和英语＆＃34;喜欢＆＃34;。我想每个人都会用各种语言知道＆＃34;喜欢＆＃34;所以我们坚持下去。

现在我们将为like_box添加更多CSS;

.like_box {
    margin-top:-40px;
}

所以整个代码看起来像这样（我已经删除了app_id，因为我不需要它）

HTML：

<div class="like_wrap">
    <iframe class="like_box" 
        src="//www.facebook.com/plugins/like.php?href=CURRENT-URL-ENCODED&amp;send=false&amp;layout=box_count&amp;width=45056&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;locale=en_US" 
        scrolling="no" 
        frameborder="0" 
        style="border:none; overflow:hidden; width:45056px; height:90px;" 
        allowTransparency="true"></iframe>
</div>

CSS：

.like_wrap {
    width:55px;
    height:25px;
    overflow:hidden; 
}

.like_box {
    margin-top:-40px;
}

现在我有一个体面，小巧的盒子，工作正常，不会跳转。让我知道这对你有用，如果你遇到任何问题。

Answer 9

现在大多数建议已经不再有效了。

截至今天的正确解决方法是使用“按钮”布局。

例如。 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

Image of button on FB Docs

FB Docs，似乎还没有完全更新......如果向下滚动，你会看到它们只显示3种布局，但下拉列表显示4。

enter image description here

这意味着你现在可以使用一种不太苛刻的解决方案！

Answer 10

我的解决方案是一个小引擎盖，但它的工作原理。我所做的只是基本上检测数字的位置，并使用css在它上面盖一个盒子。我猜你也可以欺骗系统并添加更多点击量。以下是我使用jquery的代码，但根据您在网页上放置类似按钮的位置，它会与其他代码不同。

不是最迷人但是嘿，安全性是要严格操纵框架内的内容。

<script type="text/javascript">
    var facebook_load = '';
    $(document).ready(function() {
        facebook_load = setInterval('checkIframeFacebookLoad()',100);
    });

    function checkIframeFacebookLoad() {
        if($('iframe.fb_ltr').length) {
            var parent = $('iframe.fb_ltr').parent();
            var hide_counter = $('<div></div>').attr('id', 'hide_count');
            parent.append(hide_counter);
            clearInterval(facebook_load);
        }
    }
</script>

<style type="text/css">
    #hide_count {
        position:absolute;
        top:-8px;
        left:122px;
        background:#becdd5;
        padding:5px 10px; 
    }
</style>

Answer 11

这对我有用：

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}

Answer 12

将以下内容添加到css中应该隐藏用户的文本元素并保持FB Happy

.connect_widget_not_connected_text
{
    display:none !important; /*in your stylesheets to hide the counter!*/
}

- 更新

尝试使用其他方法。

http://www.facebook.com/share/

Answer 13

Facebook现在支持隐藏计数，在标记中使用它：

data-layout="button"

Answer 14

这是我尝试过的，它在ff，chrome和ie8中运行良好：

/* set width for the <fb:like> tag */

.fb-button {
    width:51px;
}

/* set width for the iframe below, to hide the count label*/

.fb-button iframe{
    width:45px!important;
}

Answer 15

您需要做的就是编辑facebook为您提供的iframe代码，并将宽度更改为47（您需要在2个位置更改它）。到目前为止似乎对我来说完美无缺。

Facebook Like-Button - 隐藏计数？

15 个答案: