CODEWITHSUNDEEP
htmlcssfacebook-like
NeverPhased
NeverPhased

Reputation: 1566

Facebook like button causing page to jump when loading

I have tried implementing the facebook like button on my website but it causes the content that comes after to jump when loading. 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 (hopefully I have picked out the relevant 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 doesn't cause a jump but on the product and collection pages it does http://festrags.com/collections/all

I have tried adding a width and height but it is just cutting off the frame and when I make it big enough it just pushes the content down.

Upvotes: 3

Views: 1664

Answers (2)

jevon
jevon

Reputation: 3274

I had a similar problem. The solution was to force the button to be of particular dimensions, rather than unstyled:

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

But this would mean that the "Like" popup could not appear. My subsequent solution was to add a new class fb-like-not-fixed-yet, which would have the fixes above - and set a window.setTimeout to remove the class once the Like button had loaded. Yuck.

Upvotes: 1

Nico O
Nico O

Reputation: 14102

The like Button is loading an iframe to your page, which is too Large for the desired viewport. Try to add this:

.hide-fb
{
    Overflow:hidden;
}

If that should Not work like that. You will have to add a certain width and height also.

To prevent the content of your list view to jump, you can add this css:

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

The FB container has a height of 34px max (in this case), so when it's loaded your container (.hide-fb) will already have the correct height.

Update: Since the implemention above is cutting off the fb Share modal, we just Need to prevent the overflow until the iframe is loaded completly.

Try to remove every implementation of .hide-fb, that contains overflow:hidden; then just add this to your css:

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

The Containers from the fb like plugin should Not be Cut off

Update 3: This is beginning to get silly... I've created a fiddle of your page and all I did was this:

.hide-fb {
    height: 34px;
}

your float: right is also applyed to that element. Now when i load the page the element is not jumping, when FB is loaded. Also I can use all controls without having them cut off. It Could be the german Facebook behaves differently or uses different controls. But the Share Window is opened in a new browser popup. When you click "like" a dialog appears that says: "Say more about this..." this look like it could have been cut off, but it is not. It seems to have to look like that.

Upvotes: 1

Related Questions