Speed up Like / Tweet and +1 Buttons

Question

In my website I display 15 web addresses. For each address I put under a like, tweet and +1 button. Here is the code that I have for each one:

Facebook Like

 <div class="fb-like" data-href="http://website.com" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>

Tweet

<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check Out http://website.com" data-via="MySite" data-lang="es">Tweet</a>

+1

<div class="g-plusone" data-size="medium" data-href="http://website.com"></div> 

I repeat that code 15 times, 1 for every website and at the bottom of my page I have these codes which I only put once

<!-- Twitter -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>



<!-- +1 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es-419'};

  (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
</script> 

<!-- Facebook -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Let me just say that it takes about 15 seconds for everything to load with the buttons, I'm sure 1 or 2 are from the php functions but I'm sure most of it is from these buttons. What am I doing wrong? how can I speed it up? Thanks!

Answer 1

Well! have to answer my own question. I used Socialite and it works pretty good. I set it up so my buttons load on scroll. So if anybody else has this problem, this is a good option.

Answer 2

Get from database a list of websites and generate on-the-fly all elements.

You can merge PHP and Javascript to allow inserting the websites inside the javascript:

<script>
    var foo = "<?php PHP CODE HERE ?>"
</script>

Pseudo-code sample:

<script>
    var websites = json of websites

    Loop "websites" object here
        Generate each element for this website
    endloop
</script>

Answer 3

In my experience the facebook buttons tend to be the worst culprit, and I found a setting to speed them up by loading them asynchronously. In your FB script insert the following:

js.async=true;

So for your example it would be:

<!-- Facebook -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The buttons themselves still take a minute, but this way they don't hold up anything else on the page or make it behave sluggishly while they load.

Credit goes to: http://www.ockwebs.com/2012/04/load-facebook-like-asynchronously/