Facebook Like-Button – 隐藏计数？
在Like-Button的设置对话框中，只有两个布局选项：
死链接 – 替代1 死链接 – 替代2
不幸的是，我的雇主网站的数字远不及22,000，所以权力决定了我们不应该显示“喜欢”的数字，直到所说的数字更有利于我们。 据我所知，我没有通过Javascript或CSS访问button的布局（它在由Facebook提供服务的iframe中）。 有没有其他的方法来隐藏伯爵？
编码为“推荐”的Likebutton宽度为84px，“Like”button为44px，将为您节省一些时间像我这样的CSS人，他们需要隐藏我的页面目前不受欢迎！ 我把这个代码放在我的首页上，所以最初我不想让它宣传我有多less喜欢。
如果你做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; }
接受的答案是好的，但要小心多语言网页。 文本长短不一：
英文：喜欢
荷兰语：Vind ik leuk
德语：Gefälltmir
只是一个头。
只要包含在div中的iframe将宽度设置为button的宽度，则将溢出设置为隐藏即ie
<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>
现在它正式得到了Facebook的支持。 只需select“button”布局。
如果你使用Facebook的JavaScript像button（所以你可以捕捉像事件），这是我们必须做的：
由于Facebook最近在评论对话框中显示的变化，我们不得不改变我们如何隐藏它。 他们显示评论对话框的方式是“移动”我的overflow：hidden元素的内容，这样在用户点击likebutton之后，button看起来真的很奇怪。
除了使用“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>
尽pipe如此，我们仍然使用fb：like标记。 我还没有用Facebook现在提供的新的基于div的标记来testing这个标记。
我知道很多解决scheme已经发布，但我的情况还是有所不同。 它适用于类似button的HTML5版本，只使用css来隐藏计数框。 不要忘记添加appId来testing。
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像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>
好像FaceBook最近改变了一些代码 – 当我点击“Like”时，内容跳到左边，从而搞乱了用户界面。 没有CSS / JS技巧使它工作。 我用一个更简单的解决scheme，使用iframe 。
注意 – 虽然有些设备已经支持iFrame，但并非所有的移动设备都支持。 iFrames实际上是旧的，根本不推荐，但它为我做了诡计。
让我们从Facebook的默认像代的脚本，并生成一个iFrame像框;
点击这里生成像button
去“Box_Count”风格，在柜台上面。
当你按“抓取代码”，去为iFrame代码。 你会得到类似的东西，
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&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; }
现在你可能会看到柜台的左上angular。 现在我们必须修复iFrame。 给它上课;
<iframe class="like_box" (...)> </iframe>
并通过在URL中添加“＆locale = en_US”来使其始终为英文。 这是为了防止其他国家的怪异布局 – 在荷兰，它将是“Vind ik leuk”和英文“Like”。 我想每个人都会用每种语言都知道“喜欢”，所以让我们坚持下去。
现在我们将为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&send=false&layout=box_count&width=45056&show_faces=false&font&colorscheme=light&action=like&height=90&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; }
现在我有一个体面的，小的，像盒子，工作正常，不跳。 让我知道这是如何解决你，如果有任何问题，你正面临着。
大部分build议现在都不再有效了。
到目前为止，正确的解决scheme是使用“button”布局。
例如。 <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>
FB的文件，似乎还没有完全更新，如果你向下滚动，你会看到他们说只有3布局可用，但下拉build议4。
这意味着你现在可以使用一个不太冒险的解决scheme！
这对我工作：
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget { height: 26px; overflow: hidden; width: 138px; }
我的解决scheme是有点风帽，但它的工作原理。 我所做的只是基本上检测数字将在哪里，并使用css有一个盒盖。 我猜你也可以欺骗系统，并添加更多的命中，如果你想。 这里是我的代码使用jquery但它会有所不同，取决于你在页面上放置button的位置。
不是最迷人的，但嘿安全是要严格操纵框架内的内容。
<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>
将以下内容添加到您的CSS应该隐藏用户的文本元素，并保持快乐
.connect_widget_not_connected_text { display:none !important; /*in your stylesheets to hide the counter!*/ }
– 更新
尝试使用不同的方法。
Facebook现在支持隐藏计数，在标记中使用它：
data-layout="button"
这是我已经尝试过，并在ff，铬和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; }
所有你需要做的是编辑Facebook给你的iframe代码，并将宽度更改为47（你需要改变它在2个地方）。 似乎到目前为止，我完美的工作。
