Facebook Like 按钮虽然位于隐藏的 div 中，但仍可见

Question

因为今天我遇到了问题，我的 facebook like 按钮显示在页面上，尽管它被放置在隐藏的 div 中。 每个包含原始 facebook 按钮的 iframe 容器都具有“可见性：无”。 iframe 本身是可见的。有趣的是，谷歌分享按钮的工作方式完全相同（直到 iframe 的所有容器都是不可见的，并且 iframe 本身是可见的）并且没有显示。 包含我的共享按钮的 div 应该改变它的可见性，当我将鼠标悬停在某个区域上时，当然还有他的共享按钮。 工作正常，除了 facebook 按钮。 你们中是否有人最近遇到过同样的问题和/或对我有解决方案？

这是包含分享按钮的 div 的代码。

<div id="dachleiste-erweiterung-sm" class="socialmedia">
  {% set artikel_share = 0 %}
  <IR_INCLUDE FILE="tp_bks_snippet_share.twig" />
</div>

这是 tp_bks_sn-p_share.twig 的内容

<div class="share col-md-30 clear clearfix">
  {% set artikel_share = "@@share{}@@" %}
  {% if artikel_share %}
    {% set share_url = url_canonical %}
  {% else %}
    {% set share_url = homepage_url %}
  {% endif %}

    {# https://developers.facebook.com/docs/reference/plugins/like/ #}
  <div class="facebook float-left">
    <div class="fb-like" data-href="{{ share_url }}" data-width="100" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
  </div>

    {# http://twitter.com/about/resources/buttons #}
  <div class="twitter float-left">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ share_url }}" data-lang="de">Twittern</a>
    <script>!function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
          js = d.createElement(s);
          js.id = id;
          js.src = "//platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js, fjs);
        }
      }(document, "script", "twitter-wjs");</script>
  </div>

   {# https://developers.google.com/+/plugins/share/
    Place this tag where you want the +1 button to render. #}
  <div {% if artikel_share == 0 %}id="google_global" {% endif %}class="google float-left">
    <div class="g-plusone float-left" data-size="medium" data-href="{{ share_url }}"></div>
  </div>

    {# https://dev.xing.com/plugins/share_button/ #}
  <div class="xing float-left">
    <div data-counter="right" data-type="XING/Share" data-url="{{ share_url }}" data-lang="de"></div>
    <script>;
      (function(d, s) {
        var x = d.createElement(s),
                s = d.getElementsByTagName(s)[0];
        x.src = "https://www.xing-share.com/js/external/share.js";
        s.parentNode.insertBefore(x, s);
      })(document, "script");</script>
  </div>

  <div class="linkedIn float-left">
    <script src="//platform.linkedin.com/in.js" type="text/javascript">
      lang: de_DE
    </script>
    <script type="IN/Share" data-url="{{ share_url }}"></script>
  </div>
</div>

当然，我可以尝试将 facebook 按钮的不透明度设置为 0 或类似的东西，但我想找到更好的解决方案。

感谢任何帮助。 特立独行

Answer 1

遇到了同样的问题。我将 FB Like 按钮放置在一个隐藏的容器中，我只想在单击按钮时显示该按钮。然而大约一周前，FB Like 按钮变得始终可见。

我不确定 Facebook 之前是如何做到的，但现在包含 FB Like 按钮的 iframe 有自己的 CSS 属性 'visibility:visible'，这使得按钮即使父容器设置了 'visibility:hidden' 也是可见的。

使用 'display:none', 'display:block' 代替 'visibility:hidden', 'visibility:visible' em> 在您的父 div 上应该可以解决问题。

在我的情况下，我只能使用 'visibility' 属性作为解决方案，我使用以下 jQuery 代码并在 document.ready 上调用它：

$(document).ready(function(){
   setFBLikeVisibility();
});

function setFBLikeVisibility(){
    if(typeof($('div.fb-like').html()) != 'undefined'){

        if($('div.fb-like iframe').css('visibility') == 'visible'){
            $('div.fb-like iframe').css('visibility', 'inherit');
            /* or $('div.fb-like iframe').css('visibility', ''); */
        } else {
            setTimeout('setFBLikeVisibility()', 100);
        }
     }
}

这会将 CSS 样式“visibility:inherit”设置为包含 Like 按钮的 iframe，从而使其根据父容器的可见性显示/隐藏。函数是递归的，因为经过一些测试，我注意到页面加载后可能需要一些时间才能加载 Like 按钮并变为可见。