Как я могу сделать facebook как кнопки быстрее?

на моем сайте, для каждой записи в блоге у меня есть кнопка в facebook. Таким образом, по индексу есть несколько (более 10 в данный момент), таких как кнопки.

Подобные кнопки делают мою страницу немного громоздкой для использования. Общее время страницы составляет несколько секунд, и при загрузке (при любом загрузке содержимого) при загрузке оно ломается/прыгает. В любом случае, чтобы исправить это, кроме как не показывать подобную кнопку в индексе? (одна кнопка на странице создает незначительную задержку)

Для справки, мой сайт находится на http://lastyearswishes.com В firebug вы можете видеть, что время загрузки страницы составляет 20 секунд, из которых около 200 миллисекунд привязано к моему фактическому веб-сайту. Кажется, что каждая кнопка в facebook выполняет три отдельных непокрываемых, уникальных запроса.

Afterthought: теперь (почти 2 года спустя) я решил отказаться от facebook. Даже с асинхронным кодом он по-прежнему вызывал заметную задержку в времени рендеринга страницы. Он также использует некоторый статический javascript, который закручивает мой макет. Когда вы добавляете кнопки twitter, мой макет сразу выглядит так, как должен (что-то с выравниванием и поплавком, что и в facebook). Я никогда не мог использовать маржу или что-то еще, чтобы заставить facebook выстраиваться так, как хотелось)

Ответы

Ответ 1

Разработчики Facebook предоставляют javascript для создания асинхронной кнопки Как

найдено здесь: Загрузка SDK асинхронно

c/p'd здесь:

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

Обновлено:

Попробуйте только эту часть (и добавьте #xfbml=1 в конце URL-адреса, должен быть тот же результат на вашем сайте, но загружать асинхронный):

<div id="fb-root"></div>
<script>
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js#xfbml=1';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Поместите этот script в нижней части страницы