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

Einen Kommentar schreiben

Weitere Beiträge

31. Januar 2023von Christian

Probleme bei Amazon

Probleme bei Amazon: Amazon Prime Konto stillgelegt

Amazon möchte Geld von mir. Aber wegen eines skurrilen technischen Problems kann mein Mitgliedsbeitrag nicht von meiner Amazon-Kreditkarte abgebucht werden und meine Amazon Prime-Mitgliedschaft wurde daraufhin stillgelegt.

Weiterlesen … Amazon Prime Konto stillgelegt

Einen getöpferte Katze liegt auf ein paar Notenblättern. Im Vordergrund liegt eine Tastatur, an der Seite steht eine Tasse mit Noten drauf.

17. Oktober 2022von Christian

Music-XML-Konverter

Music-XML-Konverter: Text und Akkorde aus MusicXML-Dateien extrahieren

MusicXML ist ein Standard-Austausch-Format zwischen den Notationsprogrammen. Mit diesem Konverter lassen sich LeadSheets als ChordPro extrahieren.

Weiterlesen … Text und Akkorde aus MusicXML-Dateien extrahieren

Ich halte eine Tasse mit bunten aufgedruckten Noten in der Hand. Im Hintergrund ist ein Schreibtisch mit Zetteln, einer Tastatur und Monitoren. Auf den Monitoren sind bunte Sternchen abgebildet

16. Oktober 2022von Christian

Web-Konverter für Chord-Pro

Web-Konverter für Chord-Pro: Chord-Pro in Akkorde mit Lyrics umschreiben

Das Chord-Pro-Format ist enorm praktisch und universell nutzbar. Besser lesbar ist aber das "Akkord-über-Liedtext" Format.
Mit diesem Konverter lassen sich sehr einfach aus Chord-Pro klassische Lyrics generieren.

Weiterlesen … Chord-Pro in Akkorde mit Lyrics umschreiben

14. Oktober 2022von Christian

SVG mit CSS animieren

SVG mit CSS animieren: Ladeanimation selbst gemacht

Inline-SVG-Grafiken kann man mit CSS ganz wundervoll animieren. Auf diese Art habe ich aus meinem Webseitenlogo eine Ladeanimation gebastelt.

Weiterlesen … Ladeanimation selbst gemacht

Programmierung

Ein Screenshot der Startseite des Spruch-Archivs: Eine blaue Webseite mit vielen Sprüchen, einer blauen Menüführung und blauen Kästchen mit Inhalt

17. Juni 2018von Christian

mein größtes Programmierprojekt

mein größtes Programmierprojekt: Das Spruch-Archiv

Von einem Spaßprojekt ist das Spruch-Archiv zu einer der größten Spruch-Plattformen im Internet gewachsen. Dies ist die Entstehungsgeschichte.

Weiterlesen … Das Spruch-Archiv

Programmierung

Eine Kreditkarte am Angelhaken liegt auf einer Tastatur

13. Dezember 2017von Christian

Spam im Mailpostfach

Spam im Mailpostfach: Eine neue Phishing-Mail

Eine hochgefährliche Mail mit einer als Bild getarnten PHP-Datei hat mich erreicht. Zum Glück wurde das Bilder-Nachladen durch Thunderbird automatisch verhindert.

Weiterlesen … Eine neue Phishing-Mail

Spam

Der Schriftzug "Spam" leuchtet über einer Computerplatine auf. Weitere verbundene Hexagone leuchten blau.

13. Mai 2015von Christian

Datenschutzverstöße und E-Mail-Spam

Datenschutzverstöße und E-Mail-Spam: Dienste, die beschissen mit meiner Mail-Adresse umgehen

Diese Dienstleister haben nachweislich meine E-Mail-Adresse "verloren". Leider zeigen sich viele uneinsichtig und schieben die Verantwortung von sich.

Weiterlesen … Dienste, die beschissen mit meiner Mail-Adresse umgehen