Facebook Like-Button

Der Facebook "Gefällt mir"-Button erfreut sich zunehmender Popularität. Die Integration dieser Funktion in einen mit weblica erstellten Web-Auftritt ist rasch erledigt. Die folgende Anleitung erklärt, wie es geht.

Und so geht es:
  1. Legen Sie ein Feld an für die URL der Seite, auf der der Button angezeigt werden soll.
  2. Fügen Sie den Code ein auf der Seite für das Laden des nötigen Javascript-Codes von Facebook.
  3. Fügen Sie den Code für den "Gefällt mir"-Button an der gewünschten Stelle auf der Seite ein.
  4. Optional: passen Sie die Eigenschaften des Knopfs (Grösse, Beschriftung, etc.) an.

1. Ein Feld für die URL der Seite

Legen Sie ein neues Feld an mit dem Namen fb.page.url und hinterlegen Sie den folgenden Feldinhalt:
IhreDomain/$​(page.relativeURL)
Ersetzten Sie hierbei die Zeichenkette IhreDomain durch die WWW-Zieladresse Ihres Projekts; Sie finden diese in den Server-Einstellungen des Projekts.

Dieses Feld können Sie nun für jede Seite verwenden, um Facebook die Adresse, die sog. URL, der Seite mitzuteilen, für die die "Gefällt mir"-Angabe gezählt werden soll. Wie das geht, erfahren Sie gleich.

2. Der nötige Javascript-Code für die Kommunikation mit Facebook

Damit Sie den "Gefällt mir"-Button und die von Facebook hierfür bereit gestellten Funktionen nutzen können, müssen Sie auf Ihrer Seite die folgenden Zeilen Javascript-Code einbinden. Wir verwenden hiefür wiederum ein Feld und nennen dieses fb.button.script:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Dieses Feld können Sie nun direkt auf der Seite, z.B. in einem HTML-Absatz verwenden: $(fb.button.script) oder auch direkt in einem Text-Absatz. Wichtig ist hierbei, dass dieses Skript auf der Seite vor der Verwendung des eigentlichen Buttons vorkommt.
Damit sind die nötigen Vorbereitungsschritte erledigt.

3. Den "Gefällt mir"-Button hinzu fügen

Jetzt können Sie den "Gefällt mir"-Button an der gewünschten Stelle einfügen. Der Code hierfür sieht wie folgt aus:
<div class="fb-like"
 data-href="$(fb.page.url)"
 data-send="true"
 data-width="450"
 data-show-faces="true"
 data-font="verdana">
</div>
Diesen Code können Sie direkt in einem HTML-Absatz verwenden oder wiederum flexibler in einem Feld hinterlegen, das Sie dann auf allen Seiten verwenden, auf denen Sie den "Gefällt mir"-Button nutzen möchten.

Das Aussehen des Buttons anpassen: Die Einstellungsmöglichkeiten

Die Eigenschaften des Buttons können in einem gewissen Ausmass angepasst werden, die folgende Tabelle zeigt die einzelenen Parameter und deren Bedeutung:
Die Anzeige des "Gefällt mir"-Knopfs können Sie über verschiedene Parameter wie folgt steuern:

Option
Beschreibung
Vorgabe
data-send
Zusätzlich zum "Gefällt mir"-Button den "Senden"-Button von Facebook anbieten:
  • true = Button anzeigen
  • false = Button nicht anzeigen

data-width
Breite der Anzeige in Pixel '450'
data-show-faces Profil-Bilder der Liker anzeigen:
  • true = ja
  • false = nein
'true'
data-font Die Schrift für die Anzeige des Buttons. Folgende Optionen stehen zur Verfügung:
'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
'lucida grande'
data-layout  Legt die gewünschte Anzeige fest:
  • standard: Zeigt Hinweistext neben dem Button und Profil-Fotos unterhalb an; minimale Breite ohne "Senden"-Button: 225 Pixel; + 40 Pixel, wenn action = 'recommend'; + 60 Pixel, wenn "Empfehlen"-Button ebenfalls aktiv
  • button_count: Zeigt die Gesamtzahl der "Likes" rechts vom Button; minimale Breite: 90 Pixel
  • box_count: Zeigt die Gesamtzahl der "Likes" oberhalb des Buttons an; minimale Breite: 55 Pixel.
'standard'
data-action Die gewünschte Aktion. Momentan untersützt Facebook lediglich die beiden folgenden Optionen:
  • like: Der Button wird mit einem "Gefällt mir"-Text versehen
  • recommend: Der Button wird mit einem "Empfehlen"-Text versehen.
'like'
data-colorscheme  Das zu verwendende Farbschema. Aktuell bietet Facebook die beiden folgenden Varianten:
  • light
  • dark
'light'

Aufbau der Seite und das Ergebnis

Die Struktur der Absätze auf der Seite
Und das Ergebnis

Hinweis

Unter der folgenden URL finden Sie die Infos von Facebook zum "Like"-Button (in Englisch) und einen Generator, mit dem Sie den gewünschten Code auch selber generieren können: Facebook Reference: Like Button.