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.

von Christian

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.

  1. Zuerst installieren wir die Erweiterung fblikeit.
  2. 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.
  3. 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.

  1. 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:
  2. 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 <!-- und -->. 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

Bitte addieren Sie 1 und 9.

Weitere Beiträge

von Christian

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 …

von Christian

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 …

von Christian

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 …

von Christian

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 …

von Christian

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 …

von Christian

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 …

von Christian

Fehlerhafte Thunderbird-Erweiterung

Thunderbird 31.4.0 stürzt nach Update ab

Die Erweiterung "Show Address Only" sorgt bei der Thunderbird-Version 31.4.0 (2015) dafür, dass das E-Mail-Programm abstürzt und nicht mehr startet.

Weiterlesen …

von Christian

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.

Weiterlesen …

von Christian

Feiert Jesus! 1-4: Komplettes Inhaltsverzeichnis

Ein komplettes, kompaktes Inhaltsverzeichnis der Feiert-Jesus-Bände 1-4 als Excel und PDF.

Weiterlesen …

von Christian

Winter-Einsamkeits-Mutmachlied

Eigentlich okay

Als spontane Auftragskomposition entstand eines meiner Lieblingslieder über Einsamkeit und Akzeptanz.

Weiterlesen …

von Christian

Hassgedicht auf den Herbst

Mein Herbstgedicht

Meine Mitwirkung an "Bayerns längstem Herbstgedicht" war vielen wohl zu negativ "eingefärbt" und wurde zensiert.

Weiterlesen …

von Christian

Endlich ein Stagepiano

Neues E-Piano - Neuer off-Beat: Hearts

Nach reiflichen Überlegungen habe ich mir endlich ein Stage-Piano von Kawai geleistet.

Weiterlesen …