Question

我已尝试在我的网站上实现facebook like按钮，但它会导致加载后跳转的内容。关于为什么会发生这种情况的任何想法？

<div class="breadcrumb clearfix">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">Home</span></a></span> 
    <span class="arrow-space">&#62;</span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="url"><span itemprop="title">{{ collection.title }}</span></a></span>       

    {% if current_tags %}
      {% for tag in current_tags %}
        <span class="arrow-space">&#62;</span>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}" title="{{ tag | escape }}" itemprop="url"><span itemprop="title">{{ tag }}</span></a></span>       
      {% endfor %}
    {% endif %}

    {% if paginate.pages != 0 %}      
      <span class="arrow-space">&#62;</span> <strong>Page {{ paginate.current_page }} of {{ paginate.pages }}</strong>
    {% endif %}

    <div class="hide-fb">
        <div class="fb-like" data-href="https://facebook.com/festrags" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" data-width="0px">
        </div>
    </div>

  </div>

这是css（希望我已经选择了相关部分......）

.clearfix:after, .row:after { clear:both; }
.clearfix, .row { zoom:1; }

.breadcrumb { font-size: 12px; margin: 0 0 30px 0; }
.breadcrumb .arrow-space { margin: -2px 6px 0; font-size: 10px; opacity: .5; filter:alpha(opacity=50); }
.breadcrumb a { color: {{ settings.body_font_color }}; }

如果您查看主页http://festrags.com/（密码=“cheaye”）该按钮不会导致跳转，但在产品和集合页面上会显示http://festrags.com/collections/all

我尝试过添加一个宽度和高度，但它只是切断了框架，当我把它做得足够大时，它只是将内容推下来。

Answer 1

类似按钮正在为您的网页加载iframe，该iframe对于所需的视口来说太大了。尝试添加：

.hide-fb
{
    Overflow:hidden;
}

如果那不应该那样。您还必须添加一定的宽度和高度。

要阻止列表视图的内容跳转，可以添加此css：

.breadcrumb .hide-fb { 
    height: 34px; 
    overflow: hidden; 
}

FB容器的最大高度为34px（在这种情况下），因此当它加载时，您的容器（.hide-fb）已经具有正确的高度。

更新：由于上面的实现正在切断fb Share模式，我们只需要防止溢出，直到iframe完全加载为止。

尝试删除.hide-fb的每个实现，包含overflow：hidden;然后将其添加到您的css：

.hide-fb:empty { 
    height: 34px; 
    overflow: hidden; 
}

来自fb like插件的容器不应该被截断

更新3：这开始变得愚蠢...... 我创建了一个页面小提琴，我所做的就是：

.hide-fb {
    height: 34px;
}

您的float: right也适用于该元素。现在当我加载页面时，元素没有跳转，加载FB时。此外，我可以使用所有控件而不切断它们。它可能是德国Facebook表现不同或使用不同的控制。但是共享窗口在新的浏览器弹出窗口中打开。当你点击“喜欢”时会出现一个对话框，上面写着：“多说一点......”这看起来可能已被切断，但事实并非如此。它似乎必须看起来像那样。

Answer 2

我有类似的问题。解决方案是强制按钮具有特定的尺寸，而不是没有样式：

.fb-like {
    height: 30px;
    width: 78px;
    overflow: hidden;
    display: inline-block;
}

但这意味着“喜欢”弹出窗口无法显示。我的后续解决方案是添加一个新的类fb-like-not-fixed-yet，它将具有上面的修复程序 - 并设置window.setTimeout以在Like按钮加载后删除该类。呸。

Facebook喜欢按钮，导致页面在加载时跳转

2 个答案: