类似Facebook的按钮隐藏计数?

像按钮编码显示“推荐”是84px宽和“像”按钮是44px,将节省一些时间,为您的CSS像我这样的人谁需要隐藏我的网页目前是多么不受欢迎!我把这段代码放在我的主页上面,所以一开始我不想让它宣传我喜欢的东西有多少。

如果你这样做了 overflow:hidden

/* 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¤llt和平号

即

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

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

如果您使用的是Facebook的类似javascript的按钮(这样您就可以捕捉类似的事件),下面是我们要做的:

由于Facebook最近改变了评论对话框的显示方式,我们不得不改变隐藏它的方式。他们显示评论对话框的方式一直在“移动”我的页面中的内容overflow:hidden element 所以当用户点击like按钮后,这个按钮看起来真的很奇怪。

除了添加带有'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:like标记。我还没有用Facebook现在在他们网站上提供的新的基于div的标记来测试这一点。

appId 测试。

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

大多数建议现在已经失效。

到今天为止,正确的解决方法是使用“按钮”布局。

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

iframe公司

通知 -虽然有些设备已经支持iframe,但并不是所有的移动设备都支持iframe。iFrames其实很老了,根本不推荐,但它确实帮了我的忙。

Click here to generate like button

选择“盒子计数”风格,上面有一个柜台。

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

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

所以整个代码看起来是这样的(我删除了app\u id,因为我不需要它)

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

现在我有了一个像样的,小的,像盒子一样的,可以很好的工作,而且不会跳来跳去。让我知道这是如何为你工作,如果有任何问题,你是面对的。

这对我有用:

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

css 在上面盖个盒盖。我猜你也可以欺骗系统,并添加更多的点击,如果你想。这是我的代码使用 jquery 但它将不同于其他取决于你在页面上放置like按钮的位置。

不是最迷人的,但嘿,安全是紧操纵内容在一个框架的一边。

<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中应该可以为用户隐藏文本元素并让FB满意

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

--更新

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

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

data-layout="button"

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