Contao: Facebook Like-Button asynchron und valide

Contao-Erweiterung

Contao-Erweiterung: Contao: Facebook Like-Button asynchron und valide

Eine Möglichkeit, um den Facebook-Like-Button valide in Contao einzubinden und asynchron laden zu lassen.

27. Mai 2013, 13:30 Uhrvon Christian

Ein Facebook-Like-Button — Der Facebook-Like-Button verknüpft die Webseiteninhalte mit Facebook

Ich wollte auf meiner Seite für jedes Lied, jeden off-Beat und jedes Gedicht einen Facebook-Gefällt-mir-Button einfügen, damit die Besucher mir und aller Welt zeigen können, dass meine Sachen schon irgendwie ganz nett sind.

Auf der off-Beat-Übersichtsseite mit aktuell knapp 30 off-Beats wurde das leider zum Lademarathon und die Ladezeit reichte, um mit einem Trabbi ne Weltumsegelung zu machen... endlos. Noch schlimmer: Da die vielen Anfragen an Facebook (pro Like-Button!) die gesamte Webseite lahmgelegt hatten, konnte man sich die off-Beats erst anhören, wenn die Seite komplett fertig geladen war. So konnte das nicht bleiben; das Risiko, das meine Besucher mit ihrem Trabbi untergehen, war viel zu hoch!

Zum Glück ist die Lösung denkbar einfach. Facebook bietet einen asynchronen Gefällt-mir-Button auf Basis ihres XFBML-Codes an, der unabhängig von allen anderen Elementen der Seite lädt. XFBML steht für "eXtended Facebook Markup Language" und ist eigentlich der größte Schlonz unter der Sonne. Es ist nicht HTML5-valide (HTML erlaubt vieles, aber den Tag <fb:like> gibt's einfach nicht!) und einfach wieder ein Facebook-eigenes Süppchen. Aber darum kümmern wir uns am Schluss.

Zuerst installieren wir die Erweiterung fblikeit.
Anschließend kann man ein neues Inhaltselement mit dem Elementtyp Facebook "Gefällt mir" (like) - XFBML erstellen. Die Felder sind alle selbsterklärend, Application ID lässt man normalerweise frei, die Referenzseite kann man meistens auch einfach weglassen; ich benötige die Referenz nur, wenn ich auf der off-Beat-Übersichtsseite verschiedene, separate Like-Buttons für die einzelnen off-Beats (auf separaten, nicht-öffentlichen Unterseiten) einbinden möchte.
Nun erstellt man ein neues Template mit dem Namen fblikeit_xfbml.html5 und bearbeitet dieses. Der ursprüngliche Code kann komplett mit diesem Code hier ersetzt werden:

<?php
$GLOBALS['fblikeit']++;
$GLOBALS['fblikeit_lang'] = $this->lang;
$GLOBALS['fblikeit_appid'] = $this->fblikeit_appid;
?>
<div class="<?php echo $this->cssclass; ?>">
    <?php if ($this->headline): ?>
        <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
    <?php endif; ?>
    <div class="fblikebutton"><!--<fb:like href='<?php echo($this->fblikeit_href);?>' send="<?php echo($this->fblikeit_send); ?>" layout="<?php echo $this->fblikeit_layout; ?>" show_faces="<?php echo $this->fblikeit_faces; ?>" width="<?php echo $this->fblikeit_width; ?>" action="<?php echo $this->fblikeit_verb; ?>" font="<?php echo $this->fblikeit_font; ?>" colorscheme="<?php echo $this->fblikeit_color; ?>" />--></div>
</div>

Eventuell muss man die gecachten Templatedateien löschen, indem man unter System->Systemwartung die Daten von system/html, system/scripts und system/tmp bereinigt.

Der eigentliche Tag, der die Zauberei macht, ist <fb:like>. Dem aufmerksamen Beobachter fällt auf, dass dieser Tag (noch) auskommentiert ist und daher (momentan) eigentlich gar nicht angezeigt wird. Es fällt außerdem auf, dass wir einen ziemlich dicken Skript-Block einfach rausgeschmissen haben und dafür einige globale PHP-Variablen hinzugefügt haben. Die Variable fblikeit zählt hoch, wieviele Like-Schaltflächen wir auf der Seite eingebaut haben. Die Variable fblikeit_lang kümmert sich um die Sprache der Buttons, die Variable fblikeit_appid übergibt die eventuell eingegebene App-ID von Facebook. Diese Variablen brauchen wir nun für den nächsten Schritt:
Wir erstellen (oder modifizieren) das Template fe_page.html5 und fügen unmittelbar vor dem </body>-Tag diesen Code ein:

<?php if ($GLOBALS['fblikeit'] > 0): ?>
    <script src='http://connect.facebook.net/<?php echo($GLOBALS['fblikeit_lang']); ?>/all.js'></script>
    <script>
        $$('div.fblikebutton').each(function(el) {el.set('html',el.get('html').slice(4, -3))});
        FB.init({        
        <?php if($GLOBALS['fblikeit_appid']): ?>appId : '<?php echo $GLOBALS['fblikeit_appid']; ?>',<?php endif; ?>
        status : true,
        cookie : true,
        xfbml : true
        });
    </script>
<?php endif; ?>

Der Code macht nun folgendes: Falls wir eine oder mehr like-Schaltflächen (Zähler $GLOBALS['fblikeit']) auf der Seite haben, sucht er alle auskommentierten <fb:like>-Tags und entfernt die Kommentarzeichen . Dann bindet er einmalig(!) einen Javascript-Code ein, welcher die vorher an Ort und Stelle definierten <fb:like>-Tags zu iframes umwandelt und an diese Stelle einen wunschgemäß gestylten "Gefällt mir"-Button setzt. ¡Yippiejayeah!

Noch ne kurze Info: Wenn man sich die Meldungen in der Javscript-Konsole anschaut, merkt man, dass Facebook meckert, weil das fb-root-Element fehlt: The "fb-root" div has not been created, auto-creating.
Bei einem einzigen Like-Button auf der Seite kann man diese Meldung abschaffen, indem man bei Punkt 3 ein leeres DIV mit der ID "fb-root" hinzufügt:
<div id="fb-root"></div>
Ich mache dies nicht, weil ich häufig mehrere Like-Boxen auf einer Seite habe und nicht mehrmals die ID "fb-root" vergeben kann. Soll Facebook sich doch darum kümmern.

Und jetzt viel Spaß mit deinem schnellen, unkomplizierten und validen asynchronen Facebook-„Gefällt-mir“-Button!

Update 2022: Ich würde diese beschriebene Verwendung des Facebook-Like-Buttons so nicht mehr empfehlen.

Erstens beziehe ich mich auf eine veraltete Contao-Erweiterung.
Zweitens verwendet man (meines Wissens) nicht mehr XFBML zur Einbindung der Facebook-Like-Buttons.
Drittens verwendet man den Facebook-Like-Button sowieso nicht mehr.
Und viertens - und wichtigstens - ist diese Art der Einbindung nicht datenschutzkonform, da sie ohne Einverständnis des Nutzers automatisch nachgeladen wird. Hier müsste man also den Lademechanismus noch einmal überarbeiten und den Besucher vorher um Erlaubnis fragen.

Nutzt du den Facebook-Like-Button noch? Auf welche Art bindest du ihn ein? Lass mir gerne einen Kommentar da.

Zurück zur Newsübersicht