Facebook Like-Button-隐藏计数？

73

在“喜欢”按钮的设置对话框中，只有两个布局选项：

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

facebook 
— 本杰明·沃尔文德（Benjamin Wohlwend）
source
您不能使用jquery查找喜欢计数所在的dom元素并将其删除吗？
— BeRecursive
完全不要使用iframe。使用来自您自己的服务器的静态映像。具有保护用户隐私的其他好处。
— CodesInChaos 2011年
该页面的解决方案非常适合我（使用2012年8月生成的FB代码）：learn-a-lot-everyday.blogspot.com/2012/05/…–
— bigmac
2
我们是否可以（无限制）使用“赞”按钮进行此类操作？找不到有关的任何信息，并希望这样做:)
— lukas.pukenis
1
fb隐私政策IV。应用程序集成点4 d。您不得遮盖或掩盖我们社交插件的元素，例如“赞”按钮或“赞”框插件。
— 达里奥

Answers:

42

编码为显示“推荐”的“喜欢”按钮的宽度为84px，“喜欢”按钮的宽度为44px，这将为您节省一些像我这样的CSS家伙，他们需要隐藏我的页面当前的不受欢迎程度！我将此代码放在首页上，因此最初我不希望它宣传我的“顶”次数。

— Surrican
source
2
如果您使用的是javascript版本的按钮，请在下面查看我的答案。现在，您需要做更多的工作以确保一切正常。我们需要随着Facebook的变化而不断进行更改-这是对最初不打算修改的内容进行处理的陷阱之一。
— Akrikos 2011年
玩得开心，不要在移动Webkit中切断按钮。
— Marcy Sutton
9
这没有考虑使用不同语言的文本的长度。因此，您可能最终会截断文本。除非有一种方法可以解决此按钮显示语言的问题，但是我不知道这种设置。
— EmilStenström2012年
2
您可以通过指定包括来自Facebook的脚本时的语言环境逼的语言
— 的Surrican
@ joe-hopfgartner我今天在寻找解决方案，您的评论解决了我的问题:)
— edelwater
54

如果要这样做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;
}
— 法鲁克
source
4
奇迹般有效。从所有答案中，应该选择其中一个。
— Dan H'2
这不是支持多种语言的最佳解决方案。
— T. Junghans，2012年
2
这对我有用（必须使用<fb：like />版本）： .fb_edge_widget_with_comment>span,.fb_edge_widget_with_comment>span>iframe { width:52px !important; height:24px !important; }
— Nathan JB 2012年
它工作正常，但现在Facebook已经推出了评论框也相同的iframe，所以iframe的大小，因为其重要的没有得到增加，从而给奇怪的问题动态增加！
— Techmaster
42

可以接受的答案很好，但是使用多语言页面时要小心。文本的长度不同：

英语：喜欢

荷兰语：Vind ik leuk

德语：Gefälltmir

只是抬起头。

— 邦特
source
1
确切地说，我无法使用网站的答案
— David天宇Wong
10

只是将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>
— 傻兔子
source
2
这实际上不再起作用，因为他们已经更改了“赞”按钮的功能。我怀疑停止这种可能违反条款和条件的“行为”是部分故意的。
— 还要加倍
3

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

由于Facebook最近对注释对话框的显示方式进行了更改，因此我们不得不更改其隐藏方式。他们显示评论对话框的方式一直是“移动”我的overflow：hidden元素内的内容，因此用户单击“赞”按钮后，该按钮看起来确实很奇怪。

除了添加“ overflow：none”样式的包装元素之外，您还需要隐藏Facebook放置在您页面上的comment元素：

样式：

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：like标记。我尚未使用Facebook现在在其网站上提供的基于div的新标记进行测试。

— 阿克里科斯
source
3

我知道已经发布了许多解决方案，但是我的仍然有些不同。它适用于“喜欢”按钮的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>
— T·荣汉斯
source
3

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

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

例如。 <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文档上的按钮图像

FB文档似乎尚未完全更新...如果向下滚动，您会看到它们指出仅3个布局可用，但下拉菜单显示为4。

在此处输入图片说明

这意味着您现在可以使用更简单的解决方案！

— 凯昌旺
source
2

似乎FaceBook最近更改了一些代码-每当我单击“赞”时，内容就会跳到左侧，从而弄乱了UI。没有CSS / JS技巧使它起作用。我使用iframe提出了一个更简单的解决方案。

注意-尽管某些设备已经支持iFrame，但并非所有移动设备都支持。iFrame实际上很旧，完全不推荐使用，但是它为我带来了成功。

让我们从Facebook获取默认的同类生成脚本，并生成一个iFrame类框；

点击这里生成赞按钮

选择“ 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”。我想每个人，每种语言，都知道“赞”，所以坚持下去。

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

现在我有一个像样的小盒子，可以正常工作，不会跳动。让我知道这对您有何帮助，以及您是否遇到任何问题。

— 抢
source
1

这为我工作：

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
    height: 26px;
    overflow: hidden;
    width: 138px;
}
— MatíasCánepa
source
1

我的解决方案是一个小引擎盖，但它可以工作。我要做的只是基本上确定数字的位置，并用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>
— 科尼利厄斯
source
0

在您的CSS中添加以下内容应为用户隐藏text元素并保持FB Happy 

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

-更新

尝试使用其他方法。

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

— 罗伯特·皮特
source
至少在Firefox和Chrome上，它没有帮助。在尝试!important问题之前，我尝试了相同的CSS规则，但没有成功，并且添加!important似乎没有任何改变。另请参阅此问题的第三个答案：stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
— Benjamin Wohlwend 2010年
赏金增加：您可以使用Javascript API做其他聪明的事情吗？也许放一个自己的“喜欢”按钮，然后使用API​​来“喜欢”某些东西。我怀疑这是不可能的，但还有其他聪明的方法吗？
— Simon_Weaver
FACEBOOK SHARE：box_count和button_count选项显示页面在Facebook上共享的总数，在Facebook上共享的故事中添加了多少评论以及朋友喜欢共享故事的次数[ developers.facebook。 com / docs / share]
— Simon_Weaver 2010年
-1

这是我尝试过的方法，在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;
}
— 伊曼纽尔·萨纳布里亚（Emanuel Sanabria）
source
-3

您所需要做的就是编辑Facebook为您提供的iframe代码，并将宽度更改为47（您需要在2个地方进行更改）。到目前为止，对我来说似乎工作完美。

— 戴夫
source
如果您添加了更多细节，这可能是一个很好的答案。在隐藏计数的情况下，存在几种不同的情况，其中由于要解决的问题不同，解决方案也大不相同。
— Akrikos 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.