Facebook 喜欢按钮隐藏数量？

添加以下到您的 css 应该隐藏用户的文本元素，并保持快乐的 FB

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

——更新

尝试使用不同的方法。

Http://www.facebook.com/share/

只要将 iframe 包含在 div 中，就可以将宽度设置为按钮的宽度，将溢出设置为隐藏 也就是说。

  <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>

喜欢按钮编码显示“推荐”是84像素宽和“喜欢”按钮是44像素，将节省一些时间，你像我这样的 CSS 家伙谁需要隐藏我的网页目前是多么不受欢迎！我把这个代码放在我的主页顶部，所以最初我不想让它显示我有多少“喜欢”。

你所需要做的就是编辑 facebook 给你的 iframe 代码，把宽度改为47(你需要在两个地方改变它)。到目前为止对我来说还挺有效的。

如果你做 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;
}

我的解决方案是一个小兜帽，但它的工作。我所做的基本上就是检测数字的位置，然后使用 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>

这是我试过的，它在 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;
}

接受的答案是好的，但是要小心使用多种语言的页面。文本的长度不同:

中文: 喜欢

荷兰语: Vind ik leuk

德语: 给我

提醒你一下。

如果你正在使用 Facebook 的 javascript like 按钮(这样你就可以捕获类似的事件) ，以下是我们必须做的:

由于 Facebook 最近改变了评论对话框的显示方式，我们不得不改变我们隐藏它的方式。他们显示评论对话框的方式一直在“移动”我的溢出: 隐藏元素内的内容，以便按钮看起来真的奇怪后，用户点击喜欢按钮。

除了添加一个“ 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 的标记来测试这一点。

我知道很多解决方案已经发布了，但我的还是有些不同。它适用于类似按钮的 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 喜欢按钮:

<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>

这对我很有效:

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

FaceBook 最近似乎改变了一些代码——每当我点击“喜欢”，内容就会跳到左边，从而扰乱了用户界面。没有 CSS/JS 技巧使它工作。我采用了一个更简单的解决方案，使用 Iframe。

注意 -虽然一些设备已经支持 iFrame，但并非所有的移动设备都支持。IFrames 实际上已经过时了，根本不推荐使用，但它确实帮了我一个大忙。

让我们从 facebook 获取默认的 like-Generation 脚本，并生成一个 iFrame like 框;

单击此处生成 like 按钮

选择“ Box _ Count”样式，在顶部设置一个计数器。

当你按下“抓取代码”键时，选择 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>

并通过在 URL 中添加“ & locale = en _ US”使其始终是英文的。这是为了防止奇怪的布局在其他国家-在荷兰将“ Vind ik leuk”和英语“喜欢”。我想每个人，在每种语言中，都知道“喜欢”这个词，所以让我们坚持下去。

现在我们将为 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;
}

现在我有了一个像样的，小的，像盒子一样的东西，可以正常工作，而且不会跳来跳去。让我知道这对你有什么好处，如果你遇到了什么问题。

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

到目前为止，正确的解决方法是使用“按钮”布局。

例如 <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个布局可用，但下拉菜单建议4。

这意味着您现在可以使用一个不那么拙劣的解决方案！

它现在正式支持 Facebook。只要选择“按钮”布局。

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

Facebook 现在支持隐藏计数，请在标记中使用:

data-layout="button"