When I access my page, my share button dont appears immediately, and when it appears we saw the page adjusting

Question

I have a div #content1, where I have some articles, and I want to have my image of the article at left an then the content of the news at right...And I already have this working fine.

But I also have a facebook share button, and something strange is happening, when I acess my page "localhost/project/index.php", my page appears without the share button, and also my page appears a bit unformatted, and only after a while, my share button appears and the page structure adjusts.

This cause a bit bad impression, because we see the page organizing the structure when the share button appears.

Somebody there already have some problem like this an can give me a help to fix this??

This is my code for this issue: http://jsfiddle.net/J9bAd/3/

/******* HTML ********/

<div id="content1">
            <h1>News</h1>
<article class="news">
             <div class="image_container">
                <img class="img_principal" src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>

 <article class="news">
             <div class="image_container">
                 <img  src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>
</div>

/******* CSS *****/

#content1
{
    float:left;
    width:870px;
    background:yellow;
}

#content1 h1
{
    font-size:23px;
    font-weight:100;
    margin-bottom:10px;
}

.news
{
    height:auto; 
    position:relative;
    margin-bottom:10px;
}


.image_container 
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;  
}

.news h2 a
{
    font-size:21px;  
    color:#3B5998; 
    text-decoration:none;
    margin-left:0;
    font-weight:100;
}


.news p
{

    font-size: 18px;  
    text-align:justify; 
    margin-top:5px;
    margin-bottom:5px;
    line-height:25px;
    word-spacing:-2px;
}    

.fb-share-button
{
    text-decoration:none;
}

#separator
{
    width:870px;
    margin:14px auto 10px auto;
    height:1px;
    background: #f3f3f3;
}

Answer 1

The problem is that button is loaded asynchronous after page load. The possible solution is to reserve fixed size container for it.

So the page will consist this fixed size container and then button will be loaded inside container.