繁体   English   中英

尽管位于隐藏的 div 中,但 Facebook Like 按钮可见

[英]Facebook Like Button is visible although being in a hidden div

从今天起,我遇到了问题,即我的 facebook 喜欢按钮显示在页面上,尽管它被放置在一个隐藏的 div 中。 每个包含原始 facebook 按钮的 iframe 的容器都具有“可见性:无”。 iframe 本身是可见的。 有趣的是,谷歌分享按钮的工作原理完全相同(所有容器到 iframe 都是 invis,而 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_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 或类似的东西,但我想找到更好的解决方案。

任何帮助表示赞赏。 特立独行

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

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

在父 div 上使用'display:none', 'display:block'而不是'visibility:hidden', 'visibility:visible'应该可以解决问题。

在我的情况下,我只能使用“可见性”属性作为解决方案,我使用以下 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 按钮被加载并变得可见。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM