Geek asks and answers

Facebook, like a button that causes a page to reload when loading

I tried to implement the facebook button as on my website, but it calls up the content that appears after the transition at startup. Any ideas as to why this is happening?

<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>

And here is the css (I hope I chose the appropriate part ..)

.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 }}; }

If you look at the home page http://festrags.com/ (password = "cheaye") the button does not cause a jump, but on the product and collection pages http://festrags.com/collections/all

I tried adding width and height, but that just cuts off the frame, and when I make it big enough, it just pushes the content down.

+3
source share
2 answers

iframe , . :

.hide-fb
{
    Overflow:hidden;
}

. .

, css:

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

FB 34px max ( ), (.hide-fb) .

. fb Share modal, , iframe .

.hide-fb, : hidden; css:

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

fb, ,

3: ... , , , :

.hide-fb {
    height: 34px;
}

float: right . , , , FB. , . Facebook . "Share" . "", , : " ...", , , . , .

+1

. , , :

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

, "Like" . fb-like-not-fixed-yet, , window.setTimeout Like. .

+1

More articles:


All Articles