代码之家  ›  专栏  ›  技术社区  ›  Benjamin Wohlwend

类似Facebook的按钮隐藏计数?

  •  72
  • Benjamin Wohlwend  · 技术社区  · 14 年前

    setup dialog

    不幸的是,我的雇主的网站上的数字远没有接近22000,所以权力机构已经决定,我们不应该显示“喜欢”的数字,直到这个数字对我们有利一点。据我所知,我无法通过Javascript或CSS访问按钮的布局(它位于facebook提供的iframe中)。有没有其他方法来隐藏计数?

    15 回复  |  直到 5 年前
        1
  •  42
  •   Community CDub    12 年前

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

        2
  •  54
  •   sakibmoon    11 年前

    如果你这样做了 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;
    }
    
        3
  •  42
  •   Bondt    13 年前

    荷兰语:Vind ik leuk

    德语:Gef¤llt和平号

        4
  •  10
  •   sakibmoon    11 年前

      <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>
    
        6
  •  3
  •   sakibmoon    11 年前

    如果您使用的是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的标记来测试这一点。

        7
  •  3
  •   sakibmoon    11 年前

    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>
    
        8
  •  3
  •   kaichanvong    11 年前

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

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

    如。 <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文档,似乎还没有完全更新。。。如果你向下滚动,你会看到他们的状态只有3个布局可用,但下拉列表建议4。

    enter image description here

        9
  •  2
  •   sakibmoon    11 年前

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

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

        10
  •  1
  •   sakibmoon    11 年前

    这对我有用:

    .fb-like.fb_edge_widget_with_comment.fb_iframe_widget {
        height: 26px;
        overflow: hidden;
        width: 138px;
    }
    
        11
  •  1
  •   Rob    11 年前

    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>
    
        12
  •  0
  •   sakibmoon    11 年前

    将以下内容添加到css中应该可以为用户隐藏文本元素并让FB满意

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

    --更新

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

        13
  •  0
  •   Gayan Dasanayake    7 年前

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

    data-layout="button"
    
        14
  •  -1
  •   sakibmoon    11 年前

    这是我尝试过的,它在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;
    }
    
        15
  •  -3
  •   Dave    13 年前