03.08.2011 Diverses

Facebook: Tipps zur Performance-Optimierung von Social Plugins

Facebook hat gestern einen Beitrag zur Optimierung der Performance von Social Plugins im Developers Blog veröffentlicht, welcher den einen oder anderen Webmaster freuen wird. Millionen von Webseiten nutzen XFBML für das Rendern der Social Plugins. Nachfolgend sind einige Best Practice Beispiele aufgeführt, mit welchen die Leistung der Website erhöht werden können, speziell werden die channelURL […]

Thomas Hutter

2 Min. Lesezeit

1 Kommentar

Share / Save

Facebook hat gestern einen Beitrag zur Optimierung der Performance von Social Plugins im Developers Blog veröffentlicht, welcher den einen oder anderen Webmaster freuen wird.

Millionen von Webseiten nutzen XFBML für das Rendern der Social Plugins. Nachfolgend sind einige Best Practice Beispiele aufgeführt, mit welchen die Leistung der Website erhöht werden können, speziell werden die channelURL und das asynchrone Laden beschrieben, welche die Ladezeiten und den Traffic auf Grund der doppelten Facebookaufrufe reduzieren.

Custom channelURL

Die custom channelURL ist ein optionaler Paramter in der FB.init Funktion. Bei der Initialisierung der JavaScript-Bibliothek kann der channelURL Paramter in die FB.init Funktion hinzugefügt werden:

<div id="fb-root"></div>
 <script src="//connect.facebook.net/en_US/all.js"></script>
 <script>
   FB.init({
     appId  : 'YOUR APP ID',
     status: true, // check login status
     cookie: true, // enable cookies to allow server to access session,
     xfbml: true, // enable XFBML and social plugins
     oauth: true, // enable OAuth 2.0
     channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
   });
 </script>

Die channelURL zeigt auf eine Datei, welche in das lokale Verzeichnis hinzugefügt wird. Diese Datei hilft die Geschwindigkeit in einigen älteren Browserversionen zu erhöhen. Ohne die channelURL werden über diverse “Workarounds” teilweise eine Kopie der Seite in versteckten iFrames geladen um die Social Plugins sauber zu laden. Diese “Workarounds” erhöhen die Ladezeit und natürlich auch den Traffic zu Facebook.

In die channel.html-Datei muss folgender Link eingefügt werden (z.B. abgelegt in http://www.yourdomain.com/channel.html):

<script src="//connect.facebook.net/en_US/all.js"></script>

Falls eine Seite auf einem Server mit PHP ausgeführt wird, sollte für die channelURL ein Langzeit-Caching eingerichtet werden, das entsprechende PHP-Script sieht dann wie folgt aus:

<?php
  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>

<script src="//connect.facebook.net/en_US/all.js"></script>

In diesem Fall sollte die channelURL auf die voll qualifizierte URL http://www.yourdomain.com/channel.php gesetzt werden.

Bei den Tests der Facebookentwickler hat das Hinzufügen der channelURL im Internet Explorer bei einer Testseite mit 5 XFBML Plugins eine Verbesserung der Ladezeit von 1.10 auf 0.43 Sekunden gebracht.

Asynchrones Laden

Das asynchrone Laden ist eine weitere einfache Möglichkeit die Performance der Social Plugins zu erhöhen. Beim asynchronen Laden wird das Blockieren von anderen Seitenelementen verhindert. Nach dem erfolgreichen Laden der JS SDK, wird die Funktion window.fbAsyncInit aufgerufen. Diese Funktion garantiert, dass Facebookfunktionen geladen werden, ohne das andere Elemente blockiert werden, entsprechend wird das Rendering beschleunigt, was wiederum SEO-Vorteile bringt.

Beispiel-Code:

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  /* All Facebook functions should be included
     in this function, or at least initiated from here */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id',
             status: true,
             cookie: true,
 	     xfbml: true});

    FB.api('/me', function(response) {
      console.log(response.name);
    });
  };
  (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>
</body>
<html>

Die entsprechenden Dokumentationen von Facebook wurden entsprechend angepasst.

Autor: Thomas Hutter | 2032 Posts

Thomas Hutter ist Inhaber und Geschäftsführer der Hutter Consult AG. Er ist als einer der renommiertesten Facebook Marketing und Social Media Experten im deutschsprachigen Raum bekannt und wird gerne auch in den Medien als "Facebook Guru" oder "Facebook Papst" tituliert. Mit seinem Team berät er grosse und mittelständische Unternehmen, Organisationen sowie Agenturen in und rund um Facebook und Social Media Marketing. Mit seinem Blog "www.thomashutter.com" legte er 2009 den Grundstein der Hutter Consult AG. Sein Blog gilt nach wie vor als eine der wichtigsten Ressourcen zu aktuellen Entwicklungen im Bereich Facebook und Social Media Marketing. Sein umfangreiches Wissen trägt er als Dozent an Fachhochschulen und als Referent in der DACH-Region an Teilnehmer weiter. Man trifft ihn auf Branchen-Konferenzen als Speaker und Mentor hautnah, live und in Farbe.