Search code examples
javascriptfacebookfacebook-likegoogle-plusgoogle-plus-one

Make Facebook and Google+ buttons load simultaneously


Is there a way to make the "like" and the "+1" buttons load simultaneously. If you press 'Run' on jsfiddle, you will see that not only Google+ loads noticeably earlier than Facebook, but the Google+ button is also jerked to the left and then to the right after the Facebook button is loaded.

It ruins the aesthetics of the site. What are some of the methods people have tackled this issue? By the way, I realize that < center> is deprecated--it's used here to demonstrate the problem more easily.

http://jsfiddle.net/Sh7aA/

<div id="fb-root"></div>
    <script>window.fbAsyncInit=function(){FB.init({appId:'128762500483273',status:true,cookie:true,xfbml:true});};(function(){var e=document.createElement('script');e.type='text/javascript';e.src=document.location.protocol+'//connect.facebook.net/en_US/all.js';e.async=true;document.getElementById('fb-root').appendChild(e);}());</script>


<p style="text-align:center">Follow us!</p>
<center>
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

</center>

Solution

  • As answered by SimonPlus, you could hide container with buttons and show it when buttons are ready. But I think is need to watch loading of each button because there is no warranty that google plus's button always will be loaded earlier.

    Unfortunately, GooglePlus Button API hasn't the load event so it need to listen button's iframe load event. Facebook provide xfbml.render event and we can listen to it. Then we call callback and when both buttons are ready we may show their container.

    I've created demo page with example of this approach. I use jQuery for asynchronously load button scripts and subscribe to load event when buttons has begin to create.