加快點贊/鳴叫和+1按鈕

Question

在我的網站上，我顯示15個網址。 對於每個地址，我在“贊”，“ tweet”和“ +1”按鈕下添加了一個。 這是我每個人的代碼：

Facebook喜歡

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

鳴叫

<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> 

我重復該代碼15次，每個網站重復一次，在頁面底部，我只重復了一次這些代碼

<!-- 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>

我只想說，用按鈕加載所有內容大約需要15秒，我確定1或2來自php函數，但我確定大部分來自這些按鈕。 我究竟做錯了什么？ 如何加快速度？ 謝謝！

Answer 1

好！ 必須回答我自己的問題。 我使用了Socialite ，效果很好。 我進行了設置，以便按鈕滾動顯示。 因此，如果其他人有此問題，這是一個不錯的選擇。

Answer 2

從數據庫中獲取網站列表，並即時生成所有元素。

您可以合並PHP和Javascript以允許將網站插入javascript：

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

偽代碼示例：

<script>
    var websites = json of websites

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

Answer 3

以我的經驗，facebook按鈕往往是最糟糕的罪魁禍首，我發現了一種通過異步加載來加快它們速度的設置。 在您的FB腳本中插入以下內容：

js.async=true;

因此，對於您的示例，它將是：

<!-- 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>

按鈕本身仍然需要花費一分鍾，但是通過這種方式，它們不會占用頁面上的任何其他內容，也不會使其在加載時動作緩慢。

信譽歸功於： http : //www.ockwebs.com/2012/04/load-facebook-like-asynchronously/