从今天起我遇到了问题,我的 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_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',也可见。
使用'display:none'、'display:block'代替'visibility:hidden'、'visibility:visible' 在你的父 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”按钮并变得可见。
关于javascript - Facebook Like 按钮虽然位于隐藏的 div 中,但仍然可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21600395/