Question

从今天起我就遇到了问题，我的facebook喜欢按钮显示在页面上，虽然它被放置在一个隐藏的div中。包含原始facebook按钮的iframe的每个容器都有“visibility：none”。 iframe本身是可见的。有趣的是，谷歌分享按钮的工作方式完全相同（所有容器到iframe都是invis，iframe本身是可见的）并且没有显示。包含我的共享按钮的div应该改变其可见性，当我将鼠标悬停在ceartain区域上时，当然还有他的共享按钮。除facebook按钮外，工作正常。你们中的任何人最近是否遇到过同样的问题和/或有解决方案？

以下是包含共享按钮的div的代码。

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

这是tp_bks_snippet_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属性 '可见性：可见' ，这使按钮成为可能即使父容器具有 '可见性：隐藏' 设置也可见。

使用 'display：none'，'display：block' 而不是 'visibility：hidden'，'visibility：visible' 可以解决问题。

在我的情况下，我只能使用 '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样式“可见性：继承”设置为包含Like按钮的iframe，从而根据父容器可见性显示/隐藏它。函数是递归的，因为经过一些测试后，我注意到页面加载后可能需要一些时间，直到Like按钮加载并变得可见。

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

1 个答案: