0

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;
}
UserX
  • 1,295
  • 7
  • 25
  • 39
  • 1
    See [this](http://stackoverflow.com/questions/19060289/social-media-buttons-slow-down-website-load-time) link for some pointers on how to not let the social media plugins slow your website down. – Tupel May 15 '14 at 15:37
  • Thanks for your answer, but I was reading all of that answers in the post you gave me, but, no answer, is worked with my share button, I mean it works, but the time to load its icual! – UserX May 15 '14 at 16:44

1 Answers1

0

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.

santik
  • 346
  • 1
  • 12